過年啦,掛燈籠!推薦

知更鳥
知更鳥
知更鳥
1525
文章
6914
評論
2020年1月20日18:01:13 14 2.7K

過年掛燈籠是中國的一個習俗,家里掛燈籠,博客也是自己的家,當然也要掛一個了。很多年前Flash流行時,網上可以隨便找一個Flash動畫的燈籠,很方便就可以加到網站主題模板上,如今Flash已成過眼云煙,在國內甚至已變成流氓插件,網上找了找沒有合適CSS3動畫燈籠,那就自己寫一個吧,效果如圖。

過年啦,掛燈籠!

點擊圖片查看演示效果

過年啦,掛燈籠!

代碼這里也分享一下,有喜歡的朋友拿去用,將燈籠掛在自己的博客上,增加點過年的氣氛。

這個燈籠只是簡單應用一下CSS3動畫,純HTML+CSS手敲出來的,由于時間短寫的不是很嚴謹,但不影響使用,具體實現方法,文章最后有打包文件下載。

第一步、添加HTML代碼

將下面的HTML代碼添加到主題頁腳模板footer.php,</body>標簽的上面。

<!-- 燈籠1 -->
<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>

<!-- 燈籠2 -->
<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>

因為代碼中有中文,編輯后需要將模板文件保存為UTF-8 無BOM(無簽名)的格式,后臺主題編輯中修改可以忽略,上面的代碼可以只加一個,個人感覺掛兩個燈籠更靈動些。

如果只想在首頁顯示燈籠,可以用下面的判斷語句把HTML代碼包裹起來:

<?php if (is_home()) { ?>
<!-- 代碼放這里 -->
<?php } ?>

第二步、添加樣式

將樣式代碼添加到WP后臺 → 外觀 → 自定義 → 額外CSS 中,點擊“發布”即可。

.deng-box {
	position: fixed;
	top: -40px;
	right: -20px;
	z-index: 999;
}

.deng-box1 {
	position: fixed;
	top: -30px;
	right: 10px;
	z-index: 999;
}

.deng-box1 .deng {
	position: relative;
	width: 120px;
	height: 90px;
	margin: 50px;
	background: #d8000f;
	background: rgba(216, 0, 15, 0.8);
	border-radius: 50% 50%;
	-webkit-transform-origin: 50% -100px;
	-webkit-animation: swing 5s infinite ease-in-out;
	box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}

.deng {
	position: relative;
	width: 120px;
	height: 90px;
	margin: 50px;
	background: #d8000f;
	background: rgba(216, 0, 15, 0.8);
	border-radius: 50% 50%;
	-webkit-transform-origin: 50% -100px;
	-webkit-animation: swing 3s infinite ease-in-out;
	box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}

.deng-a {
	width: 100px;
	height: 90px;
	background: #d8000f;
	background: rgba(216, 0, 15, 0.1);
	margin: 12px 8px 8px 10px;
	border-radius: 50% 50%;
	border: 2px solid #dc8f03;
}

.deng-b {
	width: 45px;
	height: 90px;
	background: #d8000f;
	background: rgba(216, 0, 15, 0.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: #ffa500;
	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: #ffa500;
	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: #ffa500;
	background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #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: #ffa500;
	background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}

.deng-t {
	font-family: 華文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
	font-size: 3.2rem;
	color: #dc8f03;
	font-weight: bold;
	line-height: 85px;
	text-align: center;
}

.night .deng-t, 
.night .deng-box, 
.night .deng-box1 {
	background: transparent !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.css的最后。可能燈籠上的文字字號在有些主題上有點大,可以適當修改第133行的字號:font-size: 3.2rem;

打包文件下載

使用方法:

第一步,解壓后將deng.php文件上傳到當前主題根目錄中。

第二步,打開當前主題頁腳模板footer.php,在<?php wp_footer(); ?>上面添加:

<?php require get_template_directory() . '/deng.php'; ?>

添加判斷函數

如果只想在首頁顯示燈籠,可以用下面的判斷語句把上面的代碼包裹起來:

<?php if (is_home()) { ?>
<!-- 代碼放這里 -->
<?php } ?>

手機移動端不顯示:

<?php if (!wp_is_mobile()) { ?>
<?php require get_template_directory() . '/deng.php'; ?>
<?php } ?>

提示:加顯示判斷函數,代碼必須添加在頁腳模板<?php wp_footer(); ?>函數上面,否則無效。

這里也提前預祝大家春節快樂,萬事如意,鼠年吉祥!

 

 

weinxin
關于本站
分享交流WordPress經驗與技巧,關注前端設計與網站制作。僅用于功能演示。
WordPress 5.4.1安全更新、中文版下載 WordPress

WordPress 5.4.1安全更新、中文版下載

WordPress 5.4.修補了7個安全漏洞,并修正了17個問題。這些漏洞存在于 WordPress 版本 5.4 和更早版本,WordPress 3.7 以后的所有版本都已修補安全漏洞,建議立即更...
讓WordPress視頻播放插件Smartideo支持B站BV號 Plugins

讓WordPress視頻播放插件Smartideo支持B站BV號

B站(bilibili)近期調整視頻鏈接ID為BV開頭,B站說是為了保護稿件信息安全,容納更多投稿,維護UP主的權益。但升級后的鏈接造成WordPres視頻播放插件Smartideo中的正則無法獲取由...
B站BV號鏈接轉av號 WordPress

B站BV號鏈接轉av號

之前用Smartideo插件轉載B站視頻,只需要復制粘貼視頻地址到文章中就可以了,B站是目前唯數不多沒廣告的視頻站點了,不過最近B站視頻鏈接后綴ID號從av變成BV開頭,插件的功能失效。 已有用戶向插...
WordPress 5.4 下載 WordPress

WordPress 5.4 下載

WordPress 5.4 2020年3月31日正式發布。中文版也同發布,下載地址: WordPress 5.4中文版:https://cn.wordpress.org/wordpress-5.4-z...
匿名

發表評論

匿名網友 填寫信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

評論:14   其中:訪客  14   博主  0
    • 簡單生活 簡單生活 3

      鳥哥真是及時雨。。。

      • Yan Yan 5

        100分

        • 星光 星光 2

          感謝鳥哥!已經成功運用上

          • 奶爸建網站筆記 奶爸建網站筆記 4

            這個牛逼,我也去搞一個。

            • 夢棲小驛掌柜 夢棲小驛掌柜 0

              謝謝,去試試

              • maqingxi maqingxi 5

                原來代碼的源頭還是鳥叔呀。強!

                • 無憂 無憂 0

                  非常好的代碼,已經使用并且轉載

                  • 格子老師 格子老師 0

                    https://suibi.qian.lu/1139.html 改了一點 單側燈籠 總覺得不完整 變成雙側燈籠了!!

                    • 二龍博客 二龍博客 1

                      感謝鳥哥,我這就掛上去,順便文章也轉走了,方便以后使用
                      ——–https://erlong.org

                      • 夜未央 夜未央 2

                        借鳥哥帖子祝大家春節快樂,闔家安康!

                        • 夜未央 夜未央 2

                          這個燈籠效果在電腦上看起來很不錯,但在手機上會遮擋文字。

                            • beiwoshi小小柳之絮 beiwoshi小小柳之絮 0

                              @ 夜未央 可以加個if(!wp_is_mobile()){echo ‘HTML代碼’;},這樣就只在電腦端加載了。

                            • 心靈博客 心靈博客 3

                              挺漂亮的

                              • 騰蛙 騰蛙 4

                                會不會影響加載速度