色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3做背景云

呂致盈2年前8瀏覽0評論

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屬性。但對于初學者來說,這是一個很好的開始。在實踐中嘗試著做出你自己的背景云!