藍天白云,美麗的自然景象,給人以美好的享受和愉悅的心情。如今,我們可以使用CSS3動效去實現它,讓藍天白云更加生動。
.sky { background-color: #89cff0; /*設置天空背景色*/ position: relative; height: 500px; /*設置天空高度*/ } .cloud { background-image: url('cloud.png'); /*設置云朵背景圖片*/ background-repeat: no-repeat; position: absolute; top: 50%; left: -200px; width: 200px; height: 100px; animation: moveCloud 20s linear infinite; /*設置云朵移動動效*/ } @keyframes moveCloud { to { transform: translateX(1300px); } }
通過設置一個相對定位的天空容器,再在其中設置多個絕對定位的云朵容器。我們可以使用CSS3中的動畫屬性,實現云朵在天空中的漂移動效。在這里,我們設置云朵從左至右移動,時間為20秒,線性無限循環。同時,我們也可以調整云朵的大小和圖片,讓它們在天空中更加逼真、動態。
最終效果,就是在頁面上呈現一幅有生命的畫面,藍天白云在眼前飄過,仿佛帶來一份寧靜與舒適。只要用心去嘗試,利用CSS3的強大功能,我們完全可以實現更加復雜的動畫效果,帶給用戶更加震撼的視覺體驗。