纯CSS实现枫叶下落
生活随笔
收集整理的這篇文章主要介紹了
纯CSS实现枫叶下落
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
純CSS實現楓葉下落
教程地址：原文地址（YouTube）
B站教程：原文轉載（bilibili）
兩個視頻的內容相同，第二個為轉載
效果圖
代碼區
以下代碼為本人填寫，轉載請注明教程地址和本貼地址
html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/style.css"> </head> <body><section><h2>Autumn leaves</h2><div class="set"> <!-- 中 --><div><img src="img/f1.png"></div><div><img src="img/f2.png"></div><div><img src="img/f3.png"></div><div><img src="img/f4.png"></div><div><img src="img/f1.png"></div><div><img src="img/f2.png"></div><div><img src="img/f3.png"></div><div><img src="img/f4.png"></div></div><div class="set set2"> <!-- 前 --><div><img src="img/f1.png"></div><div><img src="img/f2.png"></div><div><img src="img/f3.png"></div><div><img src="img/f4.png"></div><div><img src="img/f1.png"></div><div><img src="img/f2.png"></div><div><img src="img/f3.png"></div><div><img src="img/f4.png"></div></div><div class="set set3"> <!-- 后 --><div><img src="img/f1.png"></div><div><img src="img/f2.png"></div><div><img src="img/f3.png"></div><div><img src="img/f4.png"></div><div><img src="img/f1.png"></div><div><img src="img/f2.png"></div><div><img src="img/f3.png"></div><div><img src="img/f4.png"></div></div></section> </body> </html>CSS
body{margin: 0; /*外邊距*/padding: 0; /*內邊距*/overflow: hidden; /*溢出隱藏*/height: 100vh; /*高度*/ } section{position: relative; /*相對定位*/width: 100%;height: 100%;background:radial-gradient(#333,#000); /*徑向漸變*/ } .set{position: absolute; /*絕對定位*/width: 100%;height: 100%;top: 0; /*距上部*/left: 0; /*距左部*/ } img{width: 100px;user-select: none; /*不可選取*/ } .set div{position: absolute;display: block; /*塊元素*/ } .set div:nth-child(1){ /*第一個子元素*/left: 20%;animation: animate 15s linear infinite; /*動畫：name time 線性執行 重復*/animation-delay: -7s; /*等待時間*/ } .set div:nth-child(2){left: 50%;animation: animate 15s linear infinite;animation-delay: -5s; } .set div:nth-child(3){left: 70%;animation: animate 20s linear infinite; } .set div:nth-child(4){left: 0%;animation: animate 15s linear infinite;animation-delay: -5s; } .set div:nth-child(5){left: 85%;animation: animate 18s linear infinite;animation-delay: -10s; } .set div:nth-child(6){left: 0%;animation: animate 12s linear infinite; } .set div:nth-child(7){left: 15%;animation: animate 14s linear infinite; } .set div:nth-child(8){left: 60%;animation: animate 15s linear infinite; } @keyframes animate{ /*動畫*/0%{top:-10%;opacity: 0; /*透明度*/transform: translateX(20px) rotate(0deg); /*動作 X軸移動 旋轉*/}10%{opacity: 1;}20%{transform: translateX(-20px) rotate(45deg);}40%{transform: translateX(-20px) rotate(90deg);}60%{transform: translateX(20px) rotate(130deg);}80%{transform: translateX(-20px) rotate(180deg);}100%{top:110%;transform: translateX(-20px) rotate(225deg);} } .set2{transform: scale(2) rotateY(180deg);filter: blur(2px); /*模糊*/z-index: 3; } .set3{transform: scale(0.8) rotateX(180deg);filter: blur(4px);z-index: 2; } h2{position: absolute;top: 50%;transform: translateY(-50%);width: 100%;text-align: center; /*居中*/margin: 0;color: #fff; /*字體顏色*/padding: 0;font-size: 8em; /*字體大小*/font-family: sans-serif; /*字體*/z-index: 1; /*Z軸順序*/user-select: none; }JS
教程地址：原文地址（YouTube）
B站教程：原文轉載（bilibili）
總結
以上是生活随笔為你收集整理的纯CSS实现枫叶下落的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android P wakeup 亮屏流
- 下一篇： CSS盒子坍塌（高度坍塌）（以及解决办法