HTML+CSS+JS实现 ❤️卡通湖面上日出动画特效❤️
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现 ❤️卡通湖面上日出动画特效❤️
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?🍅 作者主頁(yè)：Java李楊勇?
🍅 簡(jiǎn)介：Java領(lǐng)域優(yōu)質(zhì)創(chuàng)作者🏆、【java李楊勇】公號(hào)作者? ?簡(jiǎn)歷模板、學(xué)習(xí)資料、面試題庫(kù)、技術(shù)互助【關(guān)注我，都給你】
🍅 歡迎點(diǎn)贊 👍 收藏 ?留言 📝 ??
效果演示：?文末獲取源碼?
代碼目錄：
主要代碼實(shí)現(xiàn)：
CSS樣式：
* {margin: 0;padding: 0;list-style-type: none; }a, img {border: 0; }:root {--v1: #be91c6;--v2: #8a65cc;--v3: #5e30d9;--transparentv3: #5e30d900;--v4: #3b1895;--s1: #fea798;--s2: #ff846e;--cloud: #fea798; }.landscape:after, .landscape:before, .landscape *, .landscape *:after, .landscape *:before {position: absolute; }.front {z-index: 1;bottom: 0;left: 0;right: 0; }.landscape {height: 100vh;background-image: linear-gradient(var(--v1), var(--s1), var(--v1));position: relative;z-index: 1;overflow: hidden; }.mountain {border-radius: 180% 80% 0% 0%/60vmin 60vmin 0% 0%;width: 40vmin;height: 30vmin;bottom: 50%;left: -10vmin;background: var(--s1);background-image: linear-gradient(var(--v1), var(--v2) 30%, var(--v3));box-shadow: inset -10px 0 10px -10px var(--s1); }HTML代碼 :
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Sunrise over still lake</title><link rel="stylesheet" href="css/style.css"></head><body><div class="landscape"><div class="mountain"></div><div class="mountain mountain-2"></div><div class="mountain mountain-3"></div><div class="sun-container sun-container-1"></div><div class="sun-container"><div class="sun"></div></div><div class="cloud"></div><div class="cloud cloud-1"></div><div class="sun-container sun-container-reflection"><div class="sun"></div></div><div class="light"></div><div class="light light-1"></div><div class="light light-2"></div><div class="light light-3"></div><div class="light light-4"></div><div class="light light-5"></div><div class="light light-6"></div><div class="light light-7"></div><div class="water"></div><div class="splash"></div><div class="splash delay-1"></div><div class="splash delay-2"></div><div class="splash splash-4 delay-2"></div><div class="splash splash-4 delay-3"></div><div class="splash splash-4 delay-4"></div><div class="splash splash-stone delay-3"></div><div class="splash splash-stone splash-4"></div><div class="splash splash-stone splash-5"></div><div class="lotus lotus-1"></div><div class="lotus lotus-2"></div><div class="lotus lotus-3"></div><div class="front"><div class="stone"></div><div class="grass"></div><div class="grass grass-1"></div><div class="grass grass-2"></div><div class="reed"></div><div class="reed reed-1"></div></div></div></body></html>源碼獲取
大家可以點(diǎn)贊、收藏、關(guān)注、評(píng)論我啦 、查看博主主頁(yè)或下方微信公眾號(hào)獲取更多~！
打卡 文章 更新?47?/? 100天
精彩推薦更新中：
HTML5大作業(yè)實(shí)戰(zhàn)案例《100套》
Java畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例《100套》
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️卡通湖面上日出动画特效❤️的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 面试高频题：springboot自动装配
- 下一篇： 基于java Springboot实现课