分享一個(gè)有意思的圖片彈跳小動(dòng)畫懒豹，效果如下圖：
圖片跳動(dòng)效果
因?yàn)間if圖片問題，投影部分顯示會(huì)有點(diǎn)小瑕疵，實(shí)際效果會(huì)比較高清八毯。
下面是案例實(shí)現(xiàn)步驟：
第一步：
搭建結(jié)構(gòu)皮获，結(jié)構(gòu)使用ul>li>img布局焙蚓，并給body設(shè)置背景圖，投影使用偽元素after實(shí)現(xiàn)洒宝。
代碼如下：
<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>
第二步：
書寫頁面靜態(tài)效果购公，給圖片設(shè)置內(nèi)邊距和背景顏色，并設(shè)置投影雁歌，底下陰影使用偽元素定位實(shí)現(xiàn)宏浩。
代碼如下：
<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設(shè)置位移和拉伸動(dòng)畫，并且給低部陰影設(shè)置縮放和虛化将宪。
代碼如下：
<style>
.jump li img{
padding:20px;
background:rgba(255,255,255,0.6);
box-shadow:0 0 10px rgba(0,0,0,0.3);
/* 設(shè)置圖片跳動(dòng)動(dòng)畫 */
animation: jump 3s ease infinite;
}
@keyframes jump{
0%{ transform:translateY(0) scale(1,1);}
/* 中間狀態(tài)圖片位移并且拉伸 */
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%;
/* 設(shè)置投影動(dòng)畫 */
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圖片跳動(dòng)效果</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);
/* 設(shè)置圖片跳動(dòng)動(dòng)畫 */
animation: jump 3s ease infinite;
}
@keyframes jump{
0%{ transform:translateY(0) scale(1,1);}
/* 中間狀態(tài)圖片位移并且拉伸 */
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%;
/* 設(shè)置投影動(dòng)畫 */
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>
