新增第147个小实例：关门式的图文组合悬停特效
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
3774516e13
commit
c2801c51b3
|
|
@ -153,4 +153,5 @@
|
|||
143. HTML5+CSS3小实例：抖音LOGO故障风文字动画特效
|
||||
144. HTML5+CSS3小实例：图片悬停旋转堆叠特效
|
||||
145. HTML5+CSS3小实例：3D分割图片悬停拼接特效
|
||||
146. HTML5+CSS3+JS小实例：祝福版的3D标签云动画特效
|
||||
146. HTML5+CSS3+JS小实例：祝福版的3D标签云动画特效
|
||||
147. HTML5+CSS3小实例：关门式的图文组合悬停特效
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 居中显示 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 渐变背景 */
|
||||
background: linear-gradient(200deg,#fff,#ddeede);
|
||||
}
|
||||
.container{
|
||||
/* 最大宽度: 100%窗口宽度 */
|
||||
max-width: 100vw;
|
||||
/* 弹性布局 水平排列 允许换行 */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.item{
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
width: 285px;
|
||||
height: 190px;
|
||||
margin: 15px;
|
||||
/* 视距 */
|
||||
perspective: 600px;
|
||||
}
|
||||
.img{
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
/* 设置旋转的基点为右边 */
|
||||
transform-origin: right;
|
||||
/* 图片默认沿Y轴旋转0度,不透明度为1 */
|
||||
transform: rotateY(0deg);
|
||||
opacity: 1;
|
||||
/* 设置过渡 */
|
||||
transition: 0.5s;
|
||||
}
|
||||
.caption{
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
background-color: #97b8a3;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 20px;
|
||||
/* 元素的宽度和高度包含内边距和边框 */
|
||||
box-sizing: border-box;
|
||||
/* 字间距 */
|
||||
letter-spacing: 2px;
|
||||
/* 弹性布局 垂直排列 垂直居中 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
/* 设置旋转的基点为左边 */
|
||||
transform-origin: left;
|
||||
/* 文字默认沿Y轴旋转90度,不透明度为0 */
|
||||
transform: rotateY(90deg);
|
||||
opacity: 0;
|
||||
/* 过渡 */
|
||||
transition: 0.5s;
|
||||
}
|
||||
.item:hover .img{
|
||||
/* 悬停时图片消失 */
|
||||
transform: rotateY(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
.item:hover .caption{
|
||||
/* 悬停时文字显示 */
|
||||
transform: rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
.caption h3{
|
||||
font-size: 22px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.caption p{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!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>关门式的图文组合悬停特效</title>
|
||||
<link rel="stylesheet" href="147.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="item">
|
||||
<div class="img"><img src="/images/147/1.jpg" alt=""></div>
|
||||
<div class="caption">
|
||||
<h3>松</h3>
|
||||
<p>要说松树，要比大它比不过榕树，要比美它比不过柳树。但是，秋天，花谢了，草枯了，许多树的叶子都落尽了，松树却在秋风秋雨中舒展它的枝叶。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="img"><img src="/images/147/2.jpg" alt=""></div>
|
||||
<div class="caption">
|
||||
<h3>竹</h3>
|
||||
<p>竹有阳刚之气，又具阴柔之美。三千年华夏国粹，竹君始终是东方人追求的境界，但同时又与东方文化紧密相联。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="img"><img src="/images/147/3.jpg" alt=""></div>
|
||||
<div class="caption">
|
||||
<h3>梅</h3>
|
||||
<p>驿外断桥边，寂寞开无主。已是黄昏独自愁，更着风和雨。无意苦争春，一任群芳妒。零落成泥碾作尘，只有香如故。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Loading…
Reference in New Issue