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实现落叶飘飞动画特效相关推荐

css3.0动画,CSS3.0实现霓虹灯按钮动画特效的示例代码
今天给大家分享一个用CSS 3.0实现的霓虹灯按钮动画特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. CSS 3.0实现霓虹灯按钮动画特效 * { font-family: '微软雅黑', ...
短视频带货系统，HTML+CSS+JS实现宇宙星球旋转动画特效
短视频带货系统,HTML+CSS+JS实现宇宙星球旋转动画特效主要代码实现: css样式: /*** @date 2021/1/20 16:10*//* 取消默认间距 */* {margin: 0; ...
CSS 3.0实现加载动画
给大家分享一个用CSS 3.0实现加载动画,效果如下: 以下是代码实现,欢迎大家复制.粘贴和收藏. <!DOCTYPE html> <html lang="en" ...
CSS 3.0实现猫脸动画
给大家分享一个用CSS 3.0实现猫脸动画,实现的效果如下: 以下是实现的代码,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en&qu ...
CSS 3.0实现卡片悬停立体特效
今天给大家分享一个用CSS 3.0实现的卡片悬停立体特效,效果如下: 以下是代码实现,欢迎大家制复粘贴和收藏. <!DOCTYPE html> <html lang="en ...
CSS 3.0图片像素放大马赛克特效
给大家分享一个用CSS 3.0图片像素放大实现的马赛克特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="e ...
CSS 3.0实现炫酷发光特效
给大家分享一个用CSS 3.0实现的炫酷发光特效,效果如下: 以下是代码实现,欢迎大家复制.粘贴和收藏. <!DOCTYPE html> <html lang="en&qu ...
html彩虹效果文字,CSS 实现彩虹条加载动画特效
利用css的delay延迟以及旋转动画效果实现彩虹条加载动画,纯css没有一行js代码,喜欢的搞起来. HTML结构: CSS结构 body { background-color:#000; } .b ...
HTML+CSS+JS实现 ❤️彩色3D线条动画特效❤️
效果演示: 代码目录: 主要代码实现: HTML代码 : <!doctype html> <html><head><meta charset="ut ...

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

CSS 3.0实现落叶飘飞动画特效相关推荐

最新文章

热门文章