CSS3是最新的CSS標準,它增加了許多新的特性。其中一個很有趣的特性就是可以用CSS3來制作背景云。下面我們來詳細了解一下怎么做。
.backgroud { position: relative; height: 200px; margin: 0 auto; border: 1px solid #ccc; overflow: hidden; } .cloud { position: absolute; background: #fff; border-radius: 50%; opacity: .2; } .cloud1 { width: 150px; height: 80px; top: -50px; left: -50px; } .cloud2 { width: 170px; height: 120px; top: -70px; right: -50px; } .cloud3 { width: 200px; height: 150px; bottom: -50px; left: -50px; } .cloud4 { width: 180px; height: 120px; bottom: -70px; right: -30px; }
首先,我們要創建一個包含云背景的容器,設置它的高度為200px,因為我們要制作的是一個小型云背景。然后設置容器相對定位,并將overflow設置為hidden以去除溢出的云。我們將用絕對定位定位每個云。
現在我們來創建我們的云。我們需要使用CSS3的border-radius屬性將方形云轉換為圓形云形狀。然后設置它們的位置與大小,最后用opacity屬性調整它們的不透明度,使它們看起來像真正的云一樣。
當然,我們還有許多其他方式來制作不同類型的云。你可以使用CSS動畫,以及其他更高級的CSS屬性。但對于初學者來說,這是一個很好的開始。在實踐中嘗試著做出你自己的背景云!