熱氣球由熱氣袋和籃子所組成,.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...