CSS 3.0实现落叶飘飞动画特效

2023-12-08 05:55| 来源: 网络整理| 查看: 265

给大家分享一个用CSS 3.0实现的落叶飘飞动画特效，效果如下：

以下是代码实现，欢迎大家复制、粘贴和收藏。

CSS 3.0实现落叶飘飞动画特效 * { 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); } Falling Leaves

以下是上面代码中引入的树叶图片。

leaves1.png

leaves2.png

leaves3.png

leaves4.png

【本文地址】

公司简介

联系我们