白云飄動是一種通過CSS3動畫實現的美麗效果,它利用了CSS3動畫的特性對背景圖片進行漸變、運動等操作。
實現這個效果需要用到以下CSS屬性:
.background { background-image: url("background.jpg"); background-size: cover; position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .cloud { background-image: url("cloud.png"); position: absolute; top: 100px; width: 150px; height: 100px; animation: moveCloud 20s linear infinite; } @keyframes moveCloud { 0% { transform: translateX(-30%); } 100% { transform: translateX(130%); } }
以上代碼實現了一個背景圖片和一朵云。我們將云定義為一個 CSS 類,然后將它的背景圖片設置為云的圖像文件,設置它的定位方式為絕對定位,然后設置它在 HTML 頁面中的 position (位置)。最后,我們使用關鍵幀動畫來實現云的運動效果,通過將 transform 屬性設置為 translateX ,使其在水平方向上進行平移。在0%到100%之間,動畫將持續20秒,線性無限。
通過以上代碼,我們可以實現背景中白云緩慢移動飄動的效果,從而使我們的頁面更加生動、美麗。