位置: IT常識 - 正文
【HTML | CSS】春節(jié)將至，為網(wǎng)頁掛上精美的燈籠吧（附源碼）程序員的浪漫(_ html)
編輯：rootadmin推薦整理分享【HTML | CSS】春節(jié)將至，為網(wǎng)頁掛上精美的燈籠吧（附源碼）程序員的浪漫(_ html)，希望有所幫助，僅作參考，歡迎閱讀內(nèi)容。
文章相關(guān)熱門搜索詞:*html,html cgi,htmlicon,html+css+,html cgi,html chm,html+css+,春節(jié)html模板,內(nèi)容如對您有幫助，希望把文章鏈接給更多的朋友！
💂作者簡介： THUNDER王，一名熱愛財稅和SAP ABAP編程以及熱愛分享的博主。目前于江西師范大學(xué)會計學(xué)專業(yè)大二本科在讀，同時任漢碩云（廣東）科技有限公司ABAP開發(fā)顧問。在學(xué)習(xí)工作中，我通常使用偏后端的開發(fā)語言ABAP，SQL進行任務(wù)的完成，對SAP企業(yè)管理系統(tǒng)，SAP ABAP開發(fā)和數(shù)據(jù)庫具有較深入的研究。
💅文章概要： 各位小伙伴們大家好呀！2023農(nóng)歷春節(jié)將至，全國各地到處充滿了年味，是時候也該讓我們的網(wǎng)頁也掛上紅燈籠，一起享受2023農(nóng)歷兔年春節(jié)的喜慶！讓網(wǎng)頁也充滿年味！
🤟每日一言： 永遠年輕，永遠熱淚盈眶！
目錄前言燈籠效果演示?PC端燈籠效果?移動端燈籠效果?IPAD豎屏燈籠效果?IPAD橫屏燈籠效果實現(xiàn)思路?燈籠外觀設(shè)計??HTML+CSS源碼?燈籠紅線設(shè)計??CSS源碼??HTML源碼?燈籠骨架設(shè)計??CSS源碼??HTML源碼?燈籠穗設(shè)計??CSS源碼??HTML源碼?燈籠流蘇設(shè)計??CSS源碼??HTML源碼?燈籠穗與流蘇間圓形環(huán)節(jié)設(shè)計??CSS源碼??HTML源碼?燈籠內(nèi)部字體設(shè)計??CSS源碼??HTML源碼?燈籠動效設(shè)計??CSS源碼完整源碼寫在最后的話前言各位小伙伴們大家好呀！2023農(nóng)歷春節(jié)將至，全國各地到處充滿了年味，是時候也該讓我們的網(wǎng)頁也掛上紅燈籠，一起享受2023農(nóng)歷兔年春節(jié)的喜慶！讓網(wǎng)頁也充滿年味！
燈籠效果演示??下面展示四種情況下的燈籠效果演示，包括 PC端，移動端，IPAD豎屏和IPAD橫屏
?PC端燈籠效果?移動端燈籠效果?IPAD豎屏燈籠效果?IPAD橫屏燈籠效果實現(xiàn)思路??看完效果圖后，各位小伙伴們肯定很想知道實現(xiàn)的思路，接下來我將分步驟逐一進行講解，如果想要獲取源碼的小伙伴可以跳過該部分，直接前往最后的完整源碼章節(jié)！，在分步講解中我會將HTML，CSS兩個部分全部放在同一個文件中，方便各位小伙伴們獲取! ??我將實現(xiàn)思路分成了如下八個部分，列舉如下：
燈籠外觀設(shè)計 燈籠紅線設(shè)計 燈籠骨架設(shè)計 燈籠穗設(shè)計 燈籠流蘇設(shè)計 燈籠穗與流蘇間圓形環(huán)節(jié)設(shè)計 燈籠內(nèi)部字體設(shè)計 燈籠動效設(shè)計?燈籠外觀設(shè)計??通過使用HTML和CSS可以完成燈籠的外觀設(shè)計
??HTML+CSS源碼<style>.deng-box2 {position: fixed;top: -40px;left: -20px;z-index: 9999;pointer-events: none}.deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216,0,15,.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 3s infinite ease-in-out;box-shadow: -5px 5px 50px 4px #fa6c00}.deng:before {position: absolute;top: -7px;left: 29px;height: 12px;width: 60px;content: " ";display: block;z-index: 999;border-radius: 5px 5px 0 0;border: solid 1px #dc8f03;background: orange;background: linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.deng:after {position: absolute;bottom: -7px;left: 10px;height: 12px;width: 60px;content: " ";display: block;margin-left: 20px;border-radius: 0 0 5px 5px;border: solid 1px #dc8f03;background: orange;background: linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)}</style> <div class="deng-box2"> <div class="deng"> </div> </div>?燈籠紅線設(shè)計??CSS源碼??復(fù)制如下源碼添加到<style></style>標簽之間：
.xian {position: absolute;top: -20px;left: 60px;width: 2px;height: 20px;background: #dc8f03}??HTML源碼??復(fù)制如下源碼添加到<div class="deng"></div>標簽之間：
<div class="xian"></div>?燈籠骨架設(shè)計??CSS源碼
??復(fù)制如下源碼添加到<style></style>標簽之間：
.deng-a {width: 100px;height: 90px;background: #d8000f;background: rgba(216,0,15,.1);margin: 12px 8px 8px 8px;border-radius: 50% 50%;border: 2px solid #dc8f03}.deng-b {width: 45px;height: 90px;background: #d8000f;background: rgba(216,0,15,.1);margin: -4px 8px 8px 26px;border-radius: 50% 50%;border: 2px solid #dc8f03}??HTML源碼??復(fù)制如下源碼添加到<div class="xian"></div>標簽下面：
<div class="deng-a"> <div class="deng-b"> </div> </div>?燈籠穗設(shè)計??CSS源碼??復(fù)制如下源碼添加到<style></style>標簽之間：
.shui-a {position: relative;width: 5px;height: 20px;margin: -5px 0 0 59px;-webkit-animation: swing 4s infinite ease-in-out;-webkit-transform-origin: 50% -45px;background: orange;border-radius: 0 0 5px 5px}??HTML源碼??復(fù)制如下源碼添加到倒數(shù)第二個</div>標簽上方：
<div class="shui shui-a"></div>?燈籠流蘇設(shè)計??CSS源碼??復(fù)制如下源碼添加到<style></style>標簽之間：
.shui-c {position: absolute;top: 18px;left: -2px;width: 10px;height: 35px;background: orange;border-radius: 0 0 0 5px}??HTML源碼??復(fù)制如下源碼添加到<div class="shui shui-a"> </div>標簽之間：
<div class="shui-c"></div>?燈籠穗與流蘇間圓形環(huán)節(jié)設(shè)計??CSS源碼??復(fù)制如下源碼添加到<style></style>標簽之間：
.shui-b {position: absolute;top: 14px;left: -2px;width: 10px;height: 10px;background: #dc8f03;border-radius: 50%}??HTML源碼??復(fù)制如下源碼添加到<div class="shui shui-b"> </div>標簽下方：
<div class="shui-b"></div>?燈籠內(nèi)部字體設(shè)計??CSS源碼??復(fù)制如下源碼添加到<style></style>標簽之間：
.deng-t {font-family: 華文行楷,Arial,Lucida Grande,Tahoma,sans-serif;font-size: 3.2rem;color: #dc8f03;font-weight: 700;line-height: 85px;text-align: center}??HTML源碼??復(fù)制如下源碼添加到<div class="deng-b"> </div>標簽之間：
<div class="deng-t">年</div>?燈籠動效設(shè)計??CSS源碼??復(fù)制如下源碼添加到<style></style>標簽之間：
@-moz-keyframes swing {0% {-moz-transform: rotate(-10deg)}50% {-moz-transform: rotate(10deg)}100% {-moz-transform: rotate(-10deg)}}@-webkit-keyframes swing {0% {-webkit-transform: rotate(-10deg)}50% {-webkit-transform: rotate(10deg)}100% {-webkit-transform: rotate(-10deg)}}完整源碼??上面講解了單個的燈籠的實現(xiàn)步驟，這里給出四個燈籠的完整源碼，只需復(fù)制代碼并且粘貼到網(wǎng)頁的</body>標簽之前即可！
<div class="deng-box2"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">年</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box3"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">新</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box1"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">樂</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">快</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><style type="text/css">.deng-box{position:fixed;top:-40px;right:-20px;z-index:9999;pointer-events:none}.deng-box1{position:fixed;top:-30px;right:10px;z-index:9999;pointer-events:none}.deng-box2{position:fixed;top:-40px;left:-20px;z-index:9999;pointer-events:none}.deng-box3{position:fixed;top:-30px;left:10px;z-index:9999;pointer-events:none}.deng-box1 .deng,.deng-box3 .deng{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 5s infinite ease-in-out;box-shadow:-5px 5px 30px 4px #fc903d}.deng{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 3s infinite ease-in-out;box-shadow:-5px 5px 50px 4px #fa6c00}.deng-a{width:100px;height:90px;background:#d8000f;background:rgba(216,0,15,.1);margin:12px 8px 8px 8px;border-radius:50% 50%;border:2px solid #dc8f03}.deng-b{width:45px;height:90px;background:#d8000f;background:rgba(216,0,15,.1);margin:-4px 8px 8px 26px;border-radius:50% 50%;border:2px solid #dc8f03}.xian{position:absolute;top:-20px;left:60px;width:2px;height:20px;background:#dc8f03}.shui-a{position:relative;width:5px;height:20px;margin:-5px 0 0 59px;-webkit-animation:swing 4s infinite ease-in-out;-webkit-transform-origin:50% -45px;background:orange;border-radius:0 0 5px 5px}.shui-b{position:absolute;top:14px;left:-2px;width:10px;height:10px;background:#dc8f03;border-radius:50%}.shui-c{position:absolute;top:18px;left:-2px;width:10px;height:35px;background:orange;border-radius:0 0 0 5px}.deng:before{position:absolute;top:-7px;left:29px;height:12px;width:60px;content:" ";display:block;z-index:999;border-radius:5px 5px 0 0;border:solid 1px #dc8f03;background:orange;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.deng:after{position:absolute;bottom:-7px;left:10px;height:12px;width:60px;content:" ";display:block;margin-left:20px;border-radius:0 0 5px 5px;border:solid 1px #dc8f03;background:orange;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.deng-t{font-family:華文行楷,Arial,Lucida Grande,Tahoma,sans-serif;font-size:3.2rem;color:#dc8f03;font-weight:700;line-height:85px;text-align:center}.night .deng-box,.night .deng-box1,.night .deng-t{background:0 0!important}@-moz-keyframes swing{0%{-moz-transform:rotate(-10deg)}50%{-moz-transform:rotate(10deg)}100%{-moz-transform:rotate(-10deg)}}@-webkit-keyframes swing{0%{-webkit-transform:rotate(-10deg)}50%{-webkit-transform:rotate(10deg)}100%{-webkit-transform:rotate(-10deg)}}</style>寫在最后的話??本文花費大量時間介紹了如何為網(wǎng)頁掛上大紅燈籠！，希望能幫助到各位小伙伴，碼文不易，還望各位大佬們多多支持哦，你們的支持是我最大的動力！
?原創(chuàng)不易，還希望各位大佬支持一下\textcolor{blue}{原創(chuàng)不易，還希望各位大佬支持一下}原創(chuàng)不易，還希望各位大佬支持一下
👍 點贊，你的認可是我創(chuàng)作的動力！\textcolor{9c81c1}{點贊，你的認可是我創(chuàng)作的動力！}點贊，你的認可是我創(chuàng)作的動力！
?? 收藏，你的青睞是我努力的方向！\textcolor{ed7976}{收藏，你的青睞是我努力的方向！}收藏，你的青睞是我努力的方向！
?? 評論，你的意見是我進步的財富！\textcolor{98c091}{評論，你的意見是我進步的財富！}評論，你的意見是我進步的財富！
上一篇：前端實戰(zhàn)｜React18極客園——登陸模塊（token持久化、路由攔截、mobx、封裝axios）(前端實戰(zhàn)面試題)
下一篇：并發(fā)基礎(chǔ)之AQS(并發(fā)操作的定義)
