如果你想在網站上添加下雪效果,CSS提供了很好的方式來做到這一點。
首先,創建一個包含雪花的div,給它設置一些基本的CSS屬性:
.snowflakes { position: fixed; top: -10px; left: 0; width: 100%; height: 100%; pointer-events: none; }
現在我們需要添加雪花。
我們可以使用CSS偽元素:before和:after來創建花瓣:
.snowflakes:before, .snowflakes:after { content: ""; position: absolute; top: -30px; left: 0; width: 100%; height: 50px; background: transparent; pointer-events: none; }
然后,使用border-radius屬性創建雪花的形狀:
.snowflakes:before { border-radius: 50% 50% 0 0; } .snowflakes:after { border-radius: 0 0 50% 50%; transform: rotate(180deg); }
最后,添加動畫效果:
.snowflakes:before { animation: snow 0.7s infinite linear; } .snowflakes:after { animation: snow 0.7s infinite linear 0.33s; } @keyframes snow { 0% { transform: translateY(0); } 100% { transform: translateY(50px); } }
現在,你的下雪效果已經準備好了!
你只需要在HTML文檔中添加這個div:
<div class="snowflakes"></div>
然后,你的網站就有了下雪的效果!