新增第175个小实例：带功能区的图片悬停特效
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
281a8b395f
commit
fed1435caa
|
|
@ -181,4 +181,5 @@
|
|||
171. HTML5+CSS3+JS小实例：带密码灯照射的登录界面
|
||||
172. HTML5+CSS3+Vue小实例：路飞出海的动画特效
|
||||
173. HTML5+CSS3+JS小实例：交互式图片鼠标悬停景深对焦效果
|
||||
174. HTML5+CSS3+JS小实例：简约的黑色分页
|
||||
174. HTML5+CSS3+JS小实例：简约的黑色分页
|
||||
175. HTML5+CSS3小实例：带功能区的图片悬停特效
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 方便演示，满屏居中 */
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #2f3238;
|
||||
}
|
||||
.container{
|
||||
width: 100%;
|
||||
/* 弹性布局 水平+垂直居中 允许换行 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
figure{
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
margin: 10px 1%;
|
||||
width: 480px;
|
||||
height: 360px;
|
||||
/* 溢出隐藏 */
|
||||
overflow: hidden;
|
||||
background-color: #34495e;
|
||||
}
|
||||
figcaption{
|
||||
color: #fff;
|
||||
}
|
||||
/* 黑色边框 */
|
||||
figcaption::before,
|
||||
figcaption::after{
|
||||
content: "";
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
border-color: #101010;
|
||||
/* 设置过渡 */
|
||||
transition: transform 0.35s;
|
||||
/* 这里需要设置元素不对鼠标事件做出反应,图标的悬停样式才会有效 */
|
||||
pointer-events: none;
|
||||
}
|
||||
/* 右、下边框 */
|
||||
figcaption::before{
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-width: 0 70px 60px 0;
|
||||
/* 默认移出可视区域 */
|
||||
transform: translate(70px,60px);
|
||||
}
|
||||
/* 左、上边框 */
|
||||
figcaption::after{
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-width: 15px 0 0 15px;
|
||||
/* 默认移出可视区域 */
|
||||
transform: translate(-15px,-15px);
|
||||
}
|
||||
/* 图片 */
|
||||
figure img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
/* 过渡 */
|
||||
transition: 0.35s;
|
||||
}
|
||||
/* 标题 */
|
||||
figure h2{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
letter-spacing: 5px;
|
||||
font-weight: 300;
|
||||
text-shadow: 0 2px 0 rgba(0,0,0,0.5);
|
||||
transform: translate(100%,0);
|
||||
transition: transform 0.35s;
|
||||
}
|
||||
figure h2 span{
|
||||
font-weight: 700;
|
||||
}
|
||||
/* 功能图标区域 */
|
||||
figure p{
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 70px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 图标 */
|
||||
figure p i{
|
||||
margin-bottom: 30px;
|
||||
font-size: 22px !important;
|
||||
cursor: pointer;
|
||||
/* 默认隐藏 */
|
||||
transform: translate(90px,0);
|
||||
opacity: 0;
|
||||
/* 过渡 */
|
||||
transition: opacity 0.35s,transform 0.35s;
|
||||
}
|
||||
/* 接下来是鼠标悬停时的样式变化 */
|
||||
figure:hover figcaption::before,
|
||||
figure:hover figcaption::after{
|
||||
transform: translate(0,0);
|
||||
}
|
||||
figure:hover img{
|
||||
opacity: 0.8;
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
}
|
||||
figure:hover h2,
|
||||
figure:hover p i{
|
||||
transform: translate(0,0);
|
||||
}
|
||||
figure:hover p i{
|
||||
opacity: 1;
|
||||
}
|
||||
/* 设置各个图标的动画延迟(实现逐个进入) */
|
||||
figure:hover p i:nth-child(1){
|
||||
transition-delay: 0.025s;
|
||||
}
|
||||
figure:hover p i:nth-child(2){
|
||||
transition-delay: 0.05s;
|
||||
}
|
||||
figure:hover p i:nth-child(3){
|
||||
transition-delay: 0.075s;
|
||||
}
|
||||
figure:hover p i:nth-child(4){
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
figure p i:hover{
|
||||
color: #f3cf3f;
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!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="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="175.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<figure>
|
||||
<img src="/images/175/1.jpg" alt="">
|
||||
<figcaption>
|
||||
<h2>这里是<span>标题</span>哦</h2>
|
||||
<p>
|
||||
<i class="fa fa-download"></i>
|
||||
<i class="fa fa-heart"></i>
|
||||
<i class="fa fa-share"></i>
|
||||
<i class="fa fa-tags"></i>
|
||||
</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="/images/175/2.jpg" alt="">
|
||||
<figcaption>
|
||||
<h2>这里是<span>标题</span>哦</h2>
|
||||
<p>
|
||||
<i class="fa fa-download"></i>
|
||||
<i class="fa fa-heart"></i>
|
||||
<i class="fa fa-share"></i>
|
||||
<i class="fa fa-tags"></i>
|
||||
</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Loading…
Reference in New Issue