CSS3图片跳动效果
2019-07-23 本文已影响249人
AriesMiki
分享一个有意思的图片弹跳小动画，效果如下图：
图片跳动效果
因为gif图片问题，投影部分显示会有点小瑕疵，实际效果会比较高清。
下面是案例实现步骤：
第一步：
搭建结构，结构使用ul>li>img布局，并给body设置背景图，投影使用伪元素after实现。
代码如下：
<ul class="jump">
<li><img src="icon1.png" alt=""></li>
<li><img src="icon4.png" alt=""></li>
<li><img src="icon2.png" alt=""></li>
</ul>
第二步：
书写页面静态效果，给图片设置内边距和背景颜色，并设置投影，底下阴影使用伪元素定位实现。
代码如下：
<style>
*{padding: 0; margin: 0; border: 0; list-style: none;}
body{
background: url(icon-bg.png);
background-size:cover;
}
.jump{
width: 1200px;
margin: 300px auto;
}
.jump li{
width: 340px;
height: 340px;
float: left;
position: relative;
}
.jump li:nth-child(2){
margin: 0 90px;
}
.jump li img{
padding:20px;
background:rgba(255,255,255,0.6);
box-shadow:0 0 10px rgba(0,0,0,0.3);
}
.jump li:after{
content:"";
position: absolute;
width: 100%;
height:100px;
left: 0; bottom:-100px;
z-index: -1;
background:rgba(0,0,0,0.7);
filter:blur(10px);
border-radius:50%;
}
</style>
第三步：
给图片img设置位移和拉伸动画，并且给低部阴影设置缩放和虚化。
代码如下：
<style>
.jump li img{
padding:20px;
background:rgba(255,255,255,0.6);
box-shadow:0 0 10px rgba(0,0,0,0.3);
/* 设置图片跳动动画 */
animation: jump 3s ease infinite;
}
@keyframes jump{
0%{ transform:translateY(0) scale(1,1);}
/* 中间状态图片位移并且拉伸 */
50%{transform:translateY(-50px) scale(0.97,1.03);}
100%{transform:translateY(0) scale(1,1);}
}
.jump li:after{
content:"";
position: absolute;
width: 100%;
height:100px;
left: 0; bottom:-100px;
z-index: -1;
background:rgba(0,0,0,0.7);
filter:blur(10px);
border-radius:50%;
/* 设置投影动画 */
animation:shadow 3s ease infinite;
}
@keyframes shadow{
0%{transform: scale(1); opacity: 1; filter:blur(10px);}
/* 投影缩放+虚化 */
50%{transform: scale(0.8); opacity:0.7; filter:blur(20px);}
100%{transform: scale(1); opacity: 1; filter:blur(10px);}
}
</style>
最后
完整版代码如下，需要的可以打包走~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3图片跳动效果</title>
<style>
*{padding: 0; margin: 0; border: 0; list-style: none;}
body{
background: url(icon-bg.png);
background-size:cover;
}
.jump{
width: 1200px;
margin: 300px auto;
}
.jump li{
width: 340px;
height: 340px;
float: left;
position: relative;
}
.jump li:nth-child(2){
margin: 0 90px;
}
.jump li img{
padding:20px;
background:rgba(255,255,255,0.6);
box-shadow:0 0 10px rgba(0,0,0,0.3);
/* 设置图片跳动动画 */
animation: jump 3s ease infinite;
}
@keyframes jump{
0%{ transform:translateY(0) scale(1,1);}
/* 中间状态图片位移并且拉伸 */
50%{transform:translateY(-50px) scale(0.97,1.03);}
100%{transform:translateY(0) scale(1,1);}
}
.jump li:after{
content:"";
position: absolute;
width: 100%;
height:100px;
left: 0; bottom:-100px;
z-index: -1;
background:rgba(0,0,0,0.7);
filter:blur(10px);
border-radius:50%;
/* 设置投影动画 */
animation:shadow 3s ease infinite;
}
@keyframes shadow{
0%{transform: scale(1); opacity: 1; filter:blur(10px);}
/* 投影缩放+虚化 */
50%{transform: scale(0.8); opacity:0.7; filter:blur(20px);}
100%{transform: scale(1); opacity: 1; filter:blur(10px);}
}
</style>
</head>
<body>
<ul class="jump">
<li><img src="icon1.png" alt=""></li>
<li><img src="icon4.png" alt=""></li>
<li><img src="icon2.png" alt=""></li>
</ul>
</body>
</html>
