新年大吉，如何给自己的网站顶部添加灯笼特效

　　关注头条号【天域云网络】浏览更多内容
　　又到一年的新年了，过年挂灯笼是中国的一个习俗，许多网站的站长在自己的网站上挂起了红灯笼；也有小伙伴想挂红灯笼却不知道怎么挂来询问我，这时最简单的办法就是掏出源码发出来，但我想，授之与鱼不如授之与渔，所以我就写了一篇教程出来供大家参考效果展示
　　样式1开始教程
　　这个灯笼特效可以加到任何网站上面，不管你是不是用的WordPress搭建的网站都可以。
　　第一步：复制下面的CSS代码添加到你网站上面。【网站顶部添加灯笼特效1】开始天域博客www。tianyubk。com｛boxsizing：borderbox｝mediascreenand（maxwidth：970px）｛。dbox1｛display：none｝。dengl。dbox｛right：0；top：40px；transform：scale（。4）｝｝。dengl｛position：fixed；zindex：9｝。dbox｛position：fixed；right：85px；top：0；transform：scale（。8）｝。dbox1｛position：fixed；left：0；top：0；transform：scale（。8）｝。dbox。d1：：after｛content：兔年大吉｝。dbox1。d1：：after｛content：万事顺利｝。dbox1。d1，。dbox1。d1ullispan，。dbox1。d1：：after，。dbox1。d1：：before，。dbox1。d2，。dbox1。d2ullispan，。dbox1。d2：：after，。dbox1。d2：：before｛backgroundcolor：f01f1a；border：5pxsolid5c1713；boxshadow：05px61pxrgba（255，240，29，。88）｝。d1，。d1ullispan，。d1：：after，。d1：：before，。d2，。d2ullispan，。d2：：after，。d2：：before｛backgroundcolor：f01f1a；border：5pxsolid5c1713；boxshadow：05px61pxff1d1d｝。d1：：after，。d1：：before，。d2：：after，。d2：：before｛boxsizing：contentbox｝。d1：：after，。d1：：before｛height：82px；position：absolute；top：0；content：；fontsize：17px｝。d1，。d2｛position：relative；animation：swing4slinearinfinite；transformorigin：topcenter｝。d1｛width：160px；top：100px；height：90px；right：0；borderradius：80px49px｝。d1：：before｛top：5px；right：7px；width：123px；borderradius：62px52px｝。d1：：after｛textalign：center；lineheight：90px；color：ffe31d；fontweight：600；top：5px；right：35px；width：69px；borderradius：41px49px｝。d1span｛position：absolute；top：84px；left：49px；width：50px；height：16px；zindex：2；borderradius：0010px10px；backgroundcolor：ffe31d；border：5pxsolid5c1713｝。d1span：nthchild（2）｛top：17px；borderradius：10px10px00｝。d1p｛position：absolute；top：31px；left：13px；width：16px；height：13px；borderradius：25px；border：5pxsolid5c1713；borderbottom：0｝。d1ul，。d2ul｛margin：0；padding：0｝。d1ul｛position：relative；top：98px；left：52px；width：45px；display：flex｝。d1li｛flex：1；liststyle：none；height：24px；margin：02。5px；width：5px；borderradius：5px；borderright：3。5pxsolid5c1713｝。d1ulli：nthchild（3）｛content：；height：50px｝。d1ulli：nthchild（3）：：before｛content：；boxsizing：contentbox；position：absolute；top：47px；left：16px；width：5px；height：5px；borderradius：5px5px10px10px；backgroundcolor：ffe31d；border：5pxsolid5c1713｝。d1ullispan｛position：absolute；top：20px；left：17px；width：13px；height：19px；borderradius：14px｝。d2：：after，。d2：：before｛position：absolute；height：128px；top：3px；content：｝。d2｛width：199px；height：128px；top：61px；right：122px；borderradius：98px70px｝。d2：：before｛top：8px；right：18px；width：143px；borderradius：69px67px｝。d2：：after｛top：8px；right：51px；width：75px；borderradius：57px89px；background：url（https：tianyubk1300140328。cos。apbeijing。myqcloud。comE59BBEE5BA8A2FE5B08FE58594E5AD90。png）norepeat；backgroundposition：center；backgroundsize：92pxauto｝。d2span｛position：absolute；top：123px；left：68px；width：55px；height：14px；zindex：2；borderradius：0010px10px；backgroundcolor：ffe31d；border：5pxsolid5c1713｝。d2span：nthchild（2）｛top：16px；borderradius：10px10px00｝。d2p｛position：absolute；top：32px；left：13px；width：19px；height：13px；borderradius：25px；border：5pxsolid5c1713；borderbottom：0｝。d2ul｛position：relative；top：135px；left：68px；width：53px；display：flex｝。d2li｛flex：1；liststyle：none；height：24px；margin：03px；width：4px；borderradius：7px；borderright：3pxsolid5c1713｝。d2ulli：nthchild（3）｛content：；height：60px｝。d2ulli：nthchild（3）：：before｛content：；position：absolute；boxsizing：contentbox；top：59px；left：19px；width：9px；height：6px；borderradius：5px5px10px10px；backgroundcolor：ffe31d；border：5pxsolid5c1713｝。d2ullispan｛position：absolute；top：21px；left：19px；width：18px；height：17px；borderradius：20px｝keyframesswing｛0｛transform：rotate（0）｝25｛transform：rotate（13deg）｝50｛transform：rotate（0）｝75｛transform：rotate（13deg）｝100｛transform：rotate（0）｝｝
　　第二步：复制下面的HTML代码添加到网站的页脚文件。！【网站顶部添加灯笼特效1】开始天域博客www。tianyubk。combodyspanspanspanpspanullililililispanspanlililililiulspanspanspanpspanullililililispanspanlililililiulspanspanspanpspanullililililispanspanlililililiulspanspanspanpspanullililililispanspanlililililiulbody其它样式
　　样式2
　　样式3
　　查看原文：兔年大吉，给网站顶部添加灯笼特效（多个样式）天域博客