效果預覽

https://codepen.io/strugglingBoy/pen/VEzEqJ

代碼下載

https://github.com/enstrongbill/daily-frontend-exercise/tree/master/025-hot-air-balloon

---

代碼解讀

熱氣球由熱氣袋和籃子所組成，.envelope里面的第一個span標簽是熱氣袋的制作，熱氣袋是由一個圓形和一個等腰三角形制作出來的，等腰三角形的頂角因為overlflow:hidden而給切掉（隱藏）而形成了梯形的樣子。第二個span是熱氣袋子內部的紋理制作。.basket中的四個span標簽是籃子上面的四個繩子的制作

1.html代碼

<div class="hot-air-balloon"><div class="envelope"><span></span><span></span></div><div class="basket"><span></span><span></span><span></span><span></span></div> </div>

2.css代碼

藍天背景的制作

body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background: linear-gradient(deepskyblue, skyblue, lightblue 20%); }

熱氣袋的制作

.envelope span {position: absolute;width: 100%;height: 12em;border-radius: 50%;color: orange;background-color: currentColor; } .envelope span::before {content: '';position: absolute;width: 0;height: 0;border-width: 10em 5.5em 0 5.5em;border-style: solid;border-color: currentColor transparent transparent transparent;left: calc(50% - 5.5em);top: 8.45em; }

熱氣帶內部紋理的制作

.envelope span:nth-child(2) {transform: scaleX(0.4);filter: brightness(0.85) contrast(1.4); }

籃子的制作

.basket::before {content: '';box-shadow: inset 0 .3em saddlebrown;position: absolute;width: 100%;height: 1.6em;background-color: peru;bottom: 0;border-radius: 0 0 0.5em 0.5em; }

繩索的制作

.basket span {position: absolute;width: 0.1em;height: 1.5em;background-color: burlywood;left: calc((var(--n) - 1) * 0.6em);transform-origin: bottom;transform: rotate(calc(var(--r) * 7deg)); }

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

@keyframes drift {to {transform: translateY(-5%);} }

總結

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

最后大功告成

總結

以上是生活随笔為你收集整理的[005]-css实现热气球的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。