DW 是一款強大的網頁設計工具,其中 CSS 可以用來制作粒子效果,下面介紹具體方法。
// HTML 部分 <div class="container"> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> </div> // CSS 部分 .container { position: relative; width: 400px; height: 400px; } .particle { position: absolute; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; animation: particle 1s linear infinite; } @keyframes particle { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(200px, 200px) scale(0); } }
以上代碼實現了一個簡單的粒子效果,具體實現思路是:使用絕對定位將所有小球定位在容器內,并使用 CSS3 動畫使其每個小球都從初始位置逐漸偏移并逐漸消失。