CSS3技術給網頁制作帶來了很多新的特效,其中有一種特效是讓云朵飄動。
.cloud{ position:absolute; top:50%; left:-10%; width:100px; height:60px; background:linear-gradient(to right, #fff, #ccc); border-radius:50px; opacity:0.8; box-shadow:0 0 50px #fff; animation:moveCloud 20s ease-in-out infinite; } @keyframes moveCloud{ 0%{left:-10%;} 100%{left:110%;} }
如上面的代碼所示,我們先定義了一個云朵的樣式類cloud,設置了它的位置、大小、背景、邊框、透明度和陰影,然后定義了一個動畫keyframes,讓云朵從左側飄動到右側。最后在cloud類中添加animation屬性指定這個動畫。
這樣,我們就實現了一個簡單的云朵飄動特效。通過在網頁的不同位置添加多個云朵,可以營造出更加逼真的動態效果。