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)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng)，可以同時控制行和列，相比 Flex（一維布局），更適合用在整體頁面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個非?；A(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實際項目中使用它們2025-04-07- will-change 是一個 CSS 屬性，用于告訴瀏覽器某個元素在未來可能會發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中，去除a標(biāo)簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-04-07
在前端開發(fā)中，CSS（層疊樣式表）不僅是用來控制網(wǎng)頁的外觀和布局，更是實現(xiàn)復(fù)雜交互和動態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級,本文將2025-04-07css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案，感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標(biāo)懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起2025-03-10
前端 CSS 動態(tài)設(shè)置樣式：:class、:style 等技巧(推薦)
本文介紹了Vue.js中動態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法：對象語法和數(shù)組語法,通過對象語法,可以根據(jù)條件動態(tài)切換類名或樣式；通過數(shù)組語法,可以同時綁定多個類名或樣式,此外2025-02-26
