如何给网站顶部添加2个灯笼? - 旺仔先森博客

如何给网站顶部添加2个灯笼?

作者: 旺仔

全网最全的网络资源分享网站

手机扫码查看

标签:

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系wangzaibk@qq.com!

分享

我这里使用的程序是Emlog程序添加的灯笼!

效果图:

如何给网站顶部添加2个灯笼?

顶部代码:

放到"log_list.php"即可

<!--灯笼-->            <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>

CSS代码:

放到模板公用css文件里面即可,或者用<style>tag加到"header.php"里面也有

/*灯笼*/.deng-box { position: fixed; top: -30px; left: -10px; z-index: 9999; pointer-events: none;} .deng-box1 { position: fixed; top: -30px; right: 5px; z-index: 9999; pointer-events: none;}.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: -2px 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) }}

不懂的下方留言评论。

分享到:
打赏

本站开启投稿功能注册账号即可投稿


文章版权信息

阅读时间:  发布于:2020-11-26

本文标题:如何给网站顶部添加2个灯笼?

本文链接:http://52ooooo.com/post-741.html

版权声明:文章为《 旺仔》原创,转载请保留出处!

标签:

相关推荐

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Sitemap    89.62ms1498
网站代码 如何给网站顶部添加2个灯笼?
我这里使用的程序是Emlog...
扫描二维码阅读原文
旺仔先森博客 January, 01
初始化 ×