怎么用純CSS實現(xiàn)熱氣球的效果

小編給大家分享一下怎么用純CSS實現(xiàn)熱氣球的效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

    代碼解讀

    定義dom，容器中有2個子元素，.envelope代表傘蓋，.basket代表吊籃：

    <figureclass="balloon">

    <divclass="envelope">

    <span></span>

    <span></span>

    </div>

    <divclass="basket">

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    </div>

    </figure>

    居中顯示：

    body{

    margin:0;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(deepskyblue,skyblue,lightblue20%);

    }

    定義容器的尺寸，子元素.envelope和.basket縱向居中布局：

    .balloon{

    width:12em;

    height:19em;

    font-size:16px;

    display:flex;

    flex-direction:column;

    align-items:center;

    }

    先畫傘蓋。

    定義傘蓋的尺寸：

    .envelope{

    position:relative;

    width:inherit;

    height:16em;

    }

    傘蓋的形狀是上端為球形，下端為圓錐形，在二維平面中，圓錐在平面的投影為等腰三角形，所以我們先在上部畫一個圓，再在下部畫一個三角形。

    先畫上部的圓：

    .envelopespan{

    position:absolute;

    width:inherit;

    height:12em;

    border-radius:50%;

    color:orange;

    background-color:currentColor;

    }

    再用偽元素畫出下部的等腰三角形：

    .envelopespan::before{

    content:'';

    position:absolute;

    width:0;

    height:0;

    border-width:10em5.5em05.5em;

    border-style:solid;

    border-color:currentColortransparenttransparenttransparent;

    left:calc(50%-5.5em);

    top:8.45em;

    }

    .envelope下共有2個<span>元素，讓第2個<span>變形、變色，使傘蓋形成豎條紋的花紋：

    .envelopespan:nth-child(2){

    transform:scaleX(0.4);

    filter:brightness(0.85)contrast(1.4);

    }

    隱藏.envelope容器外的部分，削掉三角形最下面的尖角：

    .envelope{

    overflow:hidden;

    }

    至此，傘蓋完成，接下來畫吊籃。

    定義吊籃的尺寸：

    .basket{

    position:relative;

    width:2em;

    height:3em;

    }

    用::before偽元素畫出籃子：

    .basket::before{

    content:'';

    position:absolute;

    width:inherit;

    height:1.6em;

    background-color:peru;

    bottom:0;

    border-radius:000.5em0.5em;

    }

    用::after偽元素畫出籃子的頂邊：

    .basket::after{

    content:'';

    position:absolute;

    width:105%;

    height:0.3em;

    background-color:saddlebrown;

    left:calc((100%-105%)/2);

    top:1.3em;

    border-radius:0.3em;

    }

    .basket下共有4個<span>元素，代表4根纜繩，設(shè)置它們的樣式為豎細線：

    .basketspan{

    position:absolute;

    width:0.1em;

    height:1.5em;

    background-color:burlywood;

    }

    定位纜繩，并傾斜不同的角度：

    .basketspan{

    left:calc((var(--n)-1)*0.6em);

    transform-origin:bottom;

    transform:rotate(calc(var(--r)*7deg));

    }

    .basketspan:nth-child(1){--n:1;--r:-2;}

    .basketspan:nth-child(2){--n:2;--r:-1;}

    .basketspan:nth-child(3){--n:3;--r:1;}

    .basketspan:nth-child(4){--n:4;--r:2;}

    最后，增加熱氣球微微浮動的動畫效果：

    .balloon{

    animation:drift2sinfinitealternate;

    }

    @keyframesdrift{

    to{

    transform:translateY(-5%);

    }

    }

以上是“怎么用純CSS實現(xiàn)熱氣球的效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！