104 lines
2.1 KiB
CSS
104 lines
2.1 KiB
CSS
*{
|
|
/* 初始化 */
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body{
|
|
/* 100%窗口高度 */
|
|
height: 100vh;
|
|
/* 弹性布局 水平+垂直居中 */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #dfb88e;
|
|
}
|
|
.book{
|
|
width: 300px;
|
|
height: 400px;
|
|
background-color: #fff;
|
|
/* 开启3D效果 */
|
|
transform-style: preserve-3d;
|
|
/* 设置视距 */
|
|
perspective: 2000px;
|
|
/* 设置阴影 */
|
|
box-shadow: inset 300px 0 30px rgba(0,0,0,0.2),
|
|
0 10px 100px rgba(0,0,0,0.3);
|
|
/* 动画过渡 */
|
|
transition: 1s;
|
|
}
|
|
/* 鼠标移入，阴影变化+旋转 */
|
|
.book:hover{
|
|
transform: rotate(-10deg);
|
|
box-shadow: inset 20px 0 30px rgba(0,0,0,0.2),
|
|
0 10px 100px rgba(0,0,0,0.3);
|
|
}
|
|
.book::before{
|
|
content: "";
|
|
/* 绝对定位 */
|
|
position: absolute;
|
|
left: 0;
|
|
top: -5px;
|
|
width: 100%;
|
|
height: 5px;
|
|
background-color: #0d2a50;
|
|
/* 设置旋转元素的基点位置 */
|
|
transform-origin: bottom;
|
|
/* 沿X轴倾斜-45度 */
|
|
transform: skewX(-45deg);
|
|
}
|
|
.book::after{
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: -5px;
|
|
width: 5px;
|
|
height: 100%;
|
|
background-color: #3d5a83;
|
|
transform-origin: left;
|
|
transform: skewY(-45deg);
|
|
}
|
|
/* 封面 */
|
|
.book .cover{
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #2a3f5c;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* 相对定位 */
|
|
position: relative;
|
|
transform-origin: left;
|
|
transition: 1s;
|
|
}
|
|
.book .cover span{
|
|
position: absolute;
|
|
right: 30px;
|
|
top: 30px;
|
|
background-color: #fff;
|
|
font-size: 40px;
|
|
font-family: "隶书";
|
|
/* 竖向文本 */
|
|
writing-mode: vertical-lr;
|
|
padding: 10px 5px 5px 5px;
|
|
/* 字间距 */
|
|
letter-spacing: 5px;
|
|
}
|
|
.book:hover .cover{
|
|
transform: rotateY(-135deg);
|
|
}
|
|
.book .content{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
font-size: 40px;
|
|
font-family: "隶书";
|
|
line-height: 50px;
|
|
letter-spacing: 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
} |