005 css實現熱氣球

2021-08-29 05:15:33 字數 1226 閱讀 6038

熱氣球由熱氣袋和籃子所組成,.envelope裡面的第乙個span標籤是熱氣袋的製作,熱氣袋是由乙個圓形和乙個等腰三角形製作出來的,等腰三角形的頂角因為overlflow:hidden而給切掉(隱藏)而形成了梯形的樣子。第二個span是熱氣袋子內部的紋理製作。.basket中的四個span標籤是籃子上面的四個繩子的製作

class

="hot-air-balloon"

>

class

="envelope"

>

>

span

>

>

span

>

div>

class

="basket"

>

>

span

>

>

span

>

>

span

>

>

span

>

div>

div>

藍天背景的製作

body

熱氣袋的製作

.envelope span
.envelope span::before

熱氣帶內部紋理的製作

.envelope span:nth-child(2)
籃子的製作

.basket::before
繩索的製作

.basket span

熱氣球上下飄動的動畫製作

@keyframes drift

}

三角形和圓形的相切那裡稍微有點麻煩(不然到時認真看的時候有點怪怪的),這時需要借助高中的數學知識,不介意可以直接用f12來進行微調

最後大功告成

字型樣式 CSS入門基礎(005)

今天我們分享關於字型樣式的內容。在網頁開發中,需要優先考慮頁面的文字樣式屬性。包括字型 大小 粗細 顏色等 css字型樣式屬性 屬性值說明 font family 字型型別 font size 字型大小 font style 字型斜體 color 字型顏色 除了字型顏色以外,其他文字屬性都是font...

如何實現上捨入到0 05

這個問題是上次去一家公司去面試的時候,把我給難住了的地方。只能怪自己沒有好好的學習ceil和floor的用法 其實google了以下只需要簡單的方法一句話就可以了 如下 private static void rounduptozeropzerofive2 double input 還有一種笨方法 ...

005 根據css選擇器訪問HTML元素

根據css選擇器來訪問html元素由document的如下方法提供支援。對於指定了唯一的id屬性值的html元素,既可以使用前面介紹的getelementbyid 方法來獲取,也可以使用此處的queryselector 方法來獲取,此處只要傳入css的id選擇器即可。下面 示範了queryselec...