html+css設(shè)計兩個擺動的大燈籠

發(fā)布時間：2023-02-01 16:22:21 作者：靜Yu

本文主要介紹了html+css設(shè)計兩個擺動的大燈籠，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

實現(xiàn)效果

新年馬上就要到了，教大家用html+css設(shè)計兩個大燈籠，喜氣洋洋。

html代碼：

html代碼部分非常簡單，將一個燈籠分成幾部分進(jìn)行設(shè)計，燈籠最上方部分，中間的線條部分和最下方的燈籠穗。組合在一起就是一個完整的燈籠，我們實現(xiàn)了兩個就是將下方的代碼再復(fù)制一份就可以了。

     <div class="lantern-box">
            <div class="lantern-line"></div>
            
            <div class="lantern-body">
                <!-- 燈籠中間的線條 -->
                <div class="lantern-circle">
                    <div class="lantern-rect">
                        <!-- 燈籠中間的文字內(nèi)容 -->
                        <div class="lantern-text">新年快樂</div>
                    </div>
                </div>
                <!-- 燈籠穗 -->
                <div class="lantern-tassel"></div>
            </div>
        </div>

css部分：

燈籠整體樣式動畫，以頂部中心為旋轉(zhuǎn)點，
animation: swing 3s infinite ease-in-out,使用了一個名為swing的動畫序列，動畫序列通過@keyframes創(chuàng)建，執(zhí)行時間3s，動畫循環(huán)執(zhí)行，最后ease-in-out表示動畫執(zhí)行的節(jié)奏。

.lantern-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 設(shè)置旋轉(zhuǎn)點 */
    transform-origin: top center;
    animation: swing 3s infinite ease-in-out;
}

燈籠上方懸掛燈籠的那一條豎線。

.lantern-line {
    width: 5px;
    height: 80px;
    background-color: #dc8f03;
}

為一個矩形添加border-radius使其形成一個燈籠的外形。
box-shadow: 0 30px 115px -10px #f00;向燈籠添加陰影，模擬紅色點亮的燈。

.lantern-body {
    position: relative;
    width: 300px;
    height: 220px;
    background-color: #f00;
    border-radius: 120px;
    box-shadow: 0 30px 115px -10px #f00;
    /* 設(shè)置旋轉(zhuǎn)點 */
    transform-origin: top center;
    animation: swing 3s infinite ease-in-out;
}

燈籠上方和下方黃色的兩小部分。
border-radius 允許你設(shè)置元素的外邊框圓角。每個半徑的四個值的順序是：左上角，右上角，右下角，左下角。

.lantern-body::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100px;
    height: 20px;
    background-color: #dc8f03;
    border-radius: 5px 5px 0 0;
}
.lantern-body::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100px;
    height: 20px;
    background-color: #dc8f03;
    border-radius: 0 0 5px 5px;
}

設(shè)置燈籠的動畫效果

/* 燈籠的動畫效果 */
@keyframes swing {
    0% {
      transform: rotate(-6deg);
    }
  
    50% {
      transform: rotate(6deg);
    }
  
    100% {
      transform: rotate(-6deg);
    }
}

燈籠的線條，實際上就是一個圓形。

.lantern-circle {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 240px;
    height: 230px;
    border: 2px solid #dc8f03;
    border-radius: 50%;
}

燈籠中間的線條，是一個橢圓形。

.lantern-rect {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 90px;
    height: 240px;
    border: 2px solid #dc8f03;
    border-radius: 50%;
}

燈籠中間文字部分的樣式設(shè)置

.lantern-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    font-size: 24px;
    color: #dc8f03;
    font-weight: 700;
}

燈籠穗部分樣式設(shè)置，也是三部分組成。

.lantern-tassel {
    position: absolute;
    bottom: -40%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 5px;
    height: 75px;
    background-color: #dc8f03;
    /* 設(shè)置旋轉(zhuǎn)點 */
    animation: swing 3s infinite ease-in-out;
}
.lantern-tassel::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 30px;
    height: 30px;
    background-color: #dc8f03;
    border-radius: 50%;
}
.lantern-tassel::after {
    content: '';
    position: absolute;
    bottom: -100%;
    left: 50%;
    transform: translate(-50%, 20%);
    width: 20px;
    height: 100px;
    background-color: #ffa500;
    border-radius: 0 0 5px 10px;
}

到此這篇關(guān)于html+css設(shè)計兩個擺動的大燈籠的文章就介紹到這了,更多相關(guān)html+css大燈籠內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

Tag：HTML css 大燈籠

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

html+css設(shè)計兩個擺動的大燈籠

實現(xiàn)效果

html代碼：

css部分：

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容