程式設計師210行純css程式碼製作日出動畫特效
阿新 • • 發佈：2019-01-29
這個效果是用純css來製作的，模擬海上日出效果，海面也會隨著太陽升起而變化顏色，海里等一會還會有小鯊魚遊過哦。
日出效果原始碼：
<!doctype html> <html lang="en"> <head> <!--網站編碼格式，UTF-8 國際編碼，GBK或 gb2312 中文編碼--> <meta charset="UTF-8"> <meta name="Keywords" content="關鍵詞一，關鍵詞二"> <meta name="Description" content="網站描述內容"> <title>css日升動畫</title> <!--css js 檔案的引入--> <style> html { background: black; overflow: hidden; } .container, .sea, .sky, .sun, .light, .bird, .birdr1, .birdr, .fin, .wave { position: absolute; } .container { width: 100%; height: 400px; overflow: hidden; top: 50%; left: 50%; margin-left: -50%; margin-top: -200px; } .sky { opacity: .8; width: 100%; height: 50%; top: 0; background: radial-gradient(at50% 70%, #820, #610, #400, #100); z-index: 30; } .sea { width: 100%; height: 50%; top: 50%; background: radial-gradient(at50% 0%, #007, #004); z-index: 60; } .sun { width: 100px; height: 100px; border-radius: 50%; left: 45%; z-index: 40; background: linear-gradient(#ff0,#d00); box-shadow: 00 40px 6px #f20, 00 150px 10px #f33; animation: rise 24s ease forwards; } @keyframes rise { 0% { top: 50%; } 100% { top: 15%; } } .light { opacity: .5; left: 0%; width: 100%; height: 100%; background: radial-gradient(at50% 0%, #ff0, transparent); z-index: 60; animation: over12s ease forwards; } @keyframes over { 0% { opacity: 0 } ; 100% { opacity: .2 } ; } .bird { opacity: 1; top: 50px; left: 00px; width: 10px; height: 8px; border: 2pxsolid black; border-radius: 50%; border-top-color: transparent; border-left-color: transparent; border-bottom-color: transparent; transform: rotateZ(-75deg); animation: move25s linear infinite, flap .5s linear alternate infinite; z-index: 70; } .birdr { z-index: 70; opacity: 1; top: 50px; width: 10px; height: 8px; border: 2pxsolid black; border-radius: 50%; border-bottom-color: transparent; border-right-color: transparent; border-top-color: transparent; transform: rotateZ(75deg); margin: 0px8px; animation: mover 25s linear infinite, flap .5s linear alternate infinite; } .bird1 { opacity: 1; top: 45px; left: 0px; width: 10px; height: 8px; border: 2pxsolid black; border-radius: 50%; border-top-color: transparent; border-left-color: transparent; border-bottom-color: transparent; transform: rotateZ(-90deg); animation: move25s linear infinite 1.5s, flap .5s linear alternate infinite 1.5s; z-index: 70; } .birdr1 { z-index: 70; opacity: 1; top: 45px; width: 10px; height: 8px; border: 2pxsolid black; border-radius: 50%; border-bottom-color: transparent; border-right-color: transparent; border-top-color: transparent; transform: rotateZ(90deg); margin: 0px8px; animation: mover 25s linear infinite 1.5s, flap .5s linear alternate infinite 1.5s; } .fin { border: 30pxsolid black; top: 90%; left: 100%; z-index: 100; border-left: 30px solid transparent; border-top: 0pxsolid transparent; border-right: 10px solid transparent; border-radius: 0px 0px 2px10px; animation: swim 30s linear forwards 10s; } .wave { margin: 26px7px; border-left: 3px solid transparent; border-top: 6pxsolid rgba(50,50, 140, .3); border-right: 50px solid transparent; transform: rotatez(6deg); z-index: 60; } @keyframes swim { 0% { left: 100%; } 100% { left: -25% } ; } @keyframes move { 0% { left: 0px; } 100% { left: 100%; } } @keyframes mover { 0% { left: -0px; } 100% { left: 100%; } } @keyframes flap { 0% { border-radius: 90%; } 100% { border-radius: 10%; } } </style> </head> <body> <div class="container"> <div class="sky"></div> <div class="sea"> <div class="light"></div></div> <div class="sun"></div> <div class="bird1"></div> <div class="birdr1"></div> <div class="bird"></div> <div class="birdr"></div> <div class="fin"> <div class="wave"></div></div> </div> </body> </html>
web前端學習群：121404239，分享原始碼、視訊、企業級案例、最新知識點，歡迎初學者和在進階中的小夥伴。
關注公眾號→‘學習web前端’跟大佬一起學前端！