CSS 3.0实现落叶飘飞动画特效
Posted aiguangyuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 3.0实现落叶飘飞动画特效相关的知识，希望对你有一定的参考价值。
给大家分享一个用CSS 3.0实现的落叶飘飞动画特效，效果如下：
以下是代码实现，欢迎大家复制、粘贴和收藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 3.0实现落叶飘飞动画特效</title>
<style>
*
margin: 0;
padding: 0;
box-sizing: border-box;
section
position: relative;
width: 100%;
height: 100vh;
background: radial-gradient(#333, #000);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
section h2
color: #fff;
font-size: 8em;
text-transform: uppercase;
section .set
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
section .set div
position: absolute;
display: block;
section .set div:nth-child(1)
left: 20%;
animation: animate 15s linear infinite;
animation-delay: -7s;
section .set div:nth-child(2)
left: 50%;
animation: animate 20s linear infinite;
animation-delay: -5s;
section .set div:nth-child(3)
left: 70%;
animation: animate 20s linear infinite;
animation-delay: 0s;
section .set div:nth-child(4)
left: 0%;
animation: animate 15s linear infinite;
animation-delay: -5s;
section .set div:nth-child(5)
left: 85%;
animation: animate 18s linear infinite;
animation-delay: -10s;
section .set div:nth-child(6)
left: 0%;
animation: animate 12s linear infinite;
section .set div:nth-child(7)
left: 15%;
animation: animate 14s linear infinite;
section .set div:nth-child(8)
left: 60%;
animation: animate 15s linear infinite;
@keyframes animate
0%
opacity: 0;
top: -10%;
transform: translateX(20px) rotate(0deg);
10%
opacity: 1;
20%
transform: translateX(-20px) rotate(45deg);
40%
transform: translateX(-20px) rotate(90deg);
60%
transform: translateX(20px) rotate(180deg);
80%
transform: translateX(-20px) rotate(180deg);
100%
top: 110%;
transform: translateX(-20px) rotate(225deg);
.set-2
transform: scale(2) rotateY(180deg);
filter: blur(2px);
.set-3
transform: scale(0.8) rotateY(180deg);
filter: blur(4px);
</style>
</head>
<body>
<section>
<h2>Falling Leaves</h2>
<div class="set">
<div><img src="leaves1.png" alt=""></div>
<div><img src="leaves2.png" alt=""></div>
<div><img src="leaves3.png" alt=""></div>
<div><img src="leaves4.png" alt=""></div>
<div><img src="leaves1.png" alt=""></div>
<div><img src="leaves2.png" alt=""></div>
<div><img src="leaves3.png" alt=""></div>
<div><img src="leaves4.png" alt=""></div>
</div>
<div class="set set-2">
<div><img src="leaves1.png" alt=""></div>
<div><img src="leaves2.png" alt=""></div>
<div><img src="leaves3.png" alt=""></div>
<div><img src="leaves4.png" alt=""></div>
<div><img src="leaves1.png" alt=""></div>
<div><img src="leaves2.png" alt=""></div>
<div><img src="leaves3.png" alt=""></div>
<div><img src="leaves4.png" alt=""></div>
</div>
<div class="set set-3">
<div><img src="leaves1.png" alt=""></div>
<div><img src="leaves2.png" alt=""></div>
<div><img src="leaves3.png" alt=""></div>
<div><img src="leaves4.png" alt=""></div>
<div><img src="leaves1.png" alt=""></div>
<div><img src="leaves2.png" alt=""></div>
<div><img src="leaves3.png" alt=""></div>
<div><img src="leaves4.png" alt=""></div>
</div>
</section>
</body>
</html>以下是上面代码中引入的树叶图片。
leaves1.png
leaves2.png
leaves3.png
leaves4.png
以上是关于CSS 3.0实现落叶飘飞动画特效的主要内容，如果未能解决你的问题，请参考以下文章