新年大吉，如何给自己的网站顶部添加灯笼特效
关注头条号【天域云网络】浏览更多内容
又到一年的新年了，过年挂灯笼是中国的一个习俗，许多网站的站长在自己的网站上挂起了红灯笼；也有小伙伴想挂红灯笼却不知道怎么挂来询问我，这时最简单的办法就是掏出源码发出来，但我想，授之与鱼不如授之与渔，所以我就写了一篇教程出来供大家参考~效果展示
样式1开始教程
这个灯笼特效可以加到任何网站上面，不管你是不是用的WordPress搭建的网站都可以。
第一步：复制下面的CSS代码添加到你网站上面。/*【网站顶部添加灯笼特效-1】开始 天域博客 www.tianyubk.com */ *{box-sizing:border-box}@media screen and (max-width:970px){.d-box1{display:none}.dengl .d-box{right:0;top:-40px;transform:scale(.4)}}.dengl{position:fixed;z-index:9}.d-box{position:fixed;right:85px;top:0;transform:scale(.8)}.d-box1{position:fixed;left:0;top:0;transform:scale(.8)}.d-box .d1::after{content:＂兔年大吉＂}.d-box1 .d1::after{content:＂万事顺利＂}.d-box1 .d1,.d-box1 .d1 ul li span,.d-box1 .d1::after,.d-box1 .d1::before,.d-box1 .d2,.d-box1 .d2 ul li span,.d-box1 .d2::after,.d-box1 .d2::before{background-color:#f01f1a;border:5px solid #5c1713;box-shadow:0 5px 61px rgba(255,240,29,.88)}.d1,.d1 ul li span,.d1::after,.d1::before,.d2,.d2 ul li span,.d2::after,.d2::before{background-color:#f01f1a;border:5px solid #5c1713;box-shadow:0 5px 61px #ff1d1d}.d1::after,.d1::before,.d2::after,.d2::before{box-sizing:content-box}.d1::after,.d1::before{height:82px;position:absolute;top:0;content:＂＂;font-size:17px}.d1,.d2{position:relative;animation:swing 4s linear infinite;transform-origin:top center}.d1{width:160px;top:100px;height:90px;right:0;border-radius:80px/49px}.d1::before{top:-5px;right:7px;width:123px;border-radius:62px/52px}.d1::after{text-align:center;line-height:90px;color:#ffe31d;font-weight:600;top:-5px;right:35px;width:69px;border-radius:41px/49px}.d1 span{position:absolute;top:84px;left:49px;width:50px;height:16px;z-index:2;border-radius:0 0 10px 10px;background-color:#ffe31d;border:5px solid #5c1713}.d1 span:nth-child(2){top:-17px;border-radius:10px 10px 0 0}.d1 p{position:absolute;top:-31px;left:13px;width:16px;height:13px;border-radius:25px;border:5px solid #5c1713;border-bottom:0}.d1 ul,.d2 ul{margin:0;padding:0}.d1 ul{position:relative;top:98px;left:52px;width:45px;display:flex}.d1 li{flex:1;list-style:none;height:24px;margin:0 2.5px;width:5px;border-radius:5px;border-right:3.5px solid #5c1713}.d1 ul li:nth-child(3){content:＂＂;height:50px}.d1 ul li:nth-child(3)::before{content:＂＂;box-sizing:content-box;position:absolute;top:47px;left:16px;width:5px;height:5px;border-radius:5px 5px 10px 10px;background-color:#ffe31d;border:5px solid #5c1713}.d1 ul li span{position:absolute;top:20px;left:17px;width:13px;height:19px;border-radius:14px}.d2::after,.d2::before{position:absolute;height:128px;top:-3px;content:＂＂}.d2{width:199px;height:128px;top:-61px;right:-122px;border-radius:98px/70px}.d2::before{top:-8px;right:18px;width:143px;border-radius:69px/67px}.d2::after{top:-8px;right:51px;width:75px;border-radius:57px/89px;background:url(https://tianyubk-1300140328.cos.ap-beijing.myqcloud.com/%E5%9B%BE%E5%BA%8A%2F%E5%B0%8F%E5%85%94%E5%AD%90.png) no-repeat;background-position:center;background-size:92px auto}.d2 span{position:absolute;top:123px;left:68px;width:55px;height:14px;z-index:2;border-radius:0 0 10px 10px;background-color:#ffe31d;border:5px solid #5c1713}.d2 span:nth-child(2){top:-16px;border-radius:10px 10px 0 0}.d2 p{position:absolute;top:-32px;left:13px;width:19px;height:13px;border-radius:25px;border:5px solid #5c1713;border-bottom:0}.d2 ul{position:relative;top:135px;left:68px;width:53px;display:flex}.d2 li{flex:1;list-style:none;height:24px;margin:0 3px;width:4px;border-radius:7px;border-right:3px solid #5c1713}.d2 ul li:nth-child(3){content:＂＂;height:60px}.d2 ul li:nth-child(3)::before{content:＂＂;position:absolute;box-sizing:content-box;top:59px;left:19px;width:9px;height:6px;border-radius:5px 5px 10px 10px;background-color:#ffe31d;border:5px solid #5c1713}.d2 ul li span{position:absolute;top:21px;left:19px;width:18px;height:17px;border-radius:20px}@keyframes swing{0%{transform:rotate(0)}25%{transform:rotate(-13deg)}50%{transform:rotate(0)}75%{transform:rotate(13deg)}100%{transform:rotate(0)}}
第二步：复制下面的HTML代码添加到网站的页脚文件。 其它样式
样式2
样式3
查看原文：兔年大吉，给网站顶部添加灯笼特效（多个样式）-天域博客