新增第84个小实例：翻书动画
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
86a150a3c7
commit
4d4d1be7b2
|
|
@ -87,4 +87,5 @@
|
|||
80. HTML5+CSS3小实例：始终飞向鼠标的纸飞机
|
||||
81. HTML5+CSS3+JS小实例：滑动切换的注册登录界面
|
||||
82. HTML5+CSS3小实例：篮球弹跳动画
|
||||
83. HTML5+CSS3+JS小实例：马赛克背景的按钮特效
|
||||
83. HTML5+CSS3+JS小实例：马赛克背景的按钮特效
|
||||
84. HTML5+CSS3小实例：翻书动画
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>纯CSS实现翻书动画</title>
|
||||
<link rel="stylesheet" href="../css/84.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="book">
|
||||
<div class="cover">
|
||||
<span>葵花宝典</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>欲练此功</p>
|
||||
<p>必先自宫</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue