设为首页收藏本站
【 网站防丢失】切换到窄版

 找回密码
  注册[Register]
大牛论坛_破解软件_原创软件_游戏娱乐 - WWW.DNDN.TOP»首页 › 【 编程学习】 › 『开源交流』 › WordPress 网站过年挂灯笼方法代码
返回列表 发新帖
查看: 980|回复: 6

WordPress 网站过年挂灯笼方法代码

[复制链接]
378510078
发表于 2020-1-23 21:59 | 显示全部楼层 |阅读模式
禁止求评分、诱导评分、互刷评分、互刷悬赏值，违规者封号处理。
禁止发布推广、邀请码、邀请链接、二维码或者有利益相关的任何推广行为。
所有非原创软件请发布在【精品软件区】，发帖必须按照本版块版规格式发帖。

本帖最后由 378510078 于 2020-1-23 22:01 编辑

过年挂灯笼是中国的一个习俗，家里挂灯笼，自己博客也是自己的家，当然也要挂一个了。很多年前Flash流行时，网上可以随便找一个Flash动画的灯笼，很方便就可以加到网站主题模板上，如今Flash已成过眼云烟，在国内甚至已变成流氓插件，网上找了找没有合适CSS3动画灯笼，那就自己写一个吧，效果如图。






效果演示：https://www.zyfx8.cn
1.png
第一步、添加HTML代码将下面的HTML代码添加到主题页脚模板footer.php，</body>标签的上面。

  1. <!-- 灯笼1 -->
  2. <div class="deng-box">
  3.         <div class="deng">
  4.                 <div class="xian"></div>
  5.                 <div class="deng-a">
  6.                         <div class="deng-b"><div class="deng-t">节</div></div>
  7.                 </div>
  8.                 <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
  9.         </div>
  10. </div>
  11.   
  12. <!-- 灯笼2 -->
  13. <div class="deng-box1">
  14.         <div class="deng">
  15.                 <div class="xian"></div>
  16.                 <div class="deng-a">
  17.                         <div class="deng-b"><div class="deng-t">春</div></div>
  18.                 </div>
  19.                 <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
  20.         </div>
  21. </div>
复制代码



[/table]


因为代码中有中文，编辑后需要将模板文件保存为UTF-8 无BOM（无签名）的格式，后台主题编辑中修改可以忽略，上面的代码可以只加一个，个人感觉挂两个灯笼更灵动些。如果只想在首页显示灯笼，可以用下面的判断语句把HTML代码包裹起来：[PHP] [color=rgb(51, 102, 153) !important]纯文本查看 [color=rgb(51, 102, 153) !important]复制代码
  1. <?php if (is_home()) { ?>
  2. <!-- 代码放这里 -->
  3. <?php } ?>
复制代码


第二步、添加样式将样式代码添加到WP后台 → 外观 → 自定义 → 额外CSS 中，点击“发布”即可。


  1. .deng-box {
  2.         position: fixed;
  3.         top: -40px;
  4.         right: -20px;
  5.         z-index: 999;
  6. }
  7.   
  8. .deng-box1 {
  9.         position: fixed;
  10.         top: -30px;
  11.         right: 10px;
  12.         z-index: 999;
  13. }
  14.   
  15. .deng-box1 .deng {
  16.         position: relative;
  17.         width: 120px;
  18.         height: 90px;
  19.         margin: 50px;
  20.         background: #d8000f;
  21.         background: rgba(216, 0, 15, 0.8);
  22.         border-radius: 50% 50%;
  23.         -webkit-transform-origin: 50% -100px;
  24.         -webkit-animation: swing 5s infinite ease-in-out;
  25.         box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
  26. }
  27.   
  28. .deng {
  29.         position: relative;
  30.         width: 120px;
  31.         height: 90px;
  32.         margin: 50px;
  33.         background: #d8000f;
  34.         background: rgba(216, 0, 15, 0.8);
  35.         border-radius: 50% 50%;
  36.         -webkit-transform-origin: 50% -100px;
  37.         -webkit-animation: swing 3s infinite ease-in-out;
  38.         box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
  39. }
  40.   
  41. .deng-a {
  42.         width: 100px;
  43.         height: 90px;
  44.         background: #d8000f;
  45.         background: rgba(216, 0, 15, 0.1);
  46.         margin: 12px 8px 8px 10px;
  47.         border-radius: 50% 50%;
  48.         border: 2px solid #dc8f03;
  49. }
  50.   
  51. .deng-b {
  52.         width: 45px;
  53.         height: 90px;
  54.         background: #d8000f;
  55.         background: rgba(216, 0, 15, 0.1);
  56.         margin: -4px 8px 8px 26px;
  57.         border-radius: 50% 50%;
  58.         border: 2px solid #dc8f03;
  59. }
  60.   
  61. .xian {
  62.         position: absolute;
  63.         top: -20px;
  64.         left: 60px;
  65.         width: 2px;
  66.         height: 20px;
  67.         background: #dc8f03;
  68. }
  69.   
  70. .shui-a {
  71.         position: relative;
  72.         width: 5px;
  73.         height: 20px;
  74.         margin: -5px 0 0 59px;
  75.         -webkit-animation: swing 4s infinite ease-in-out;
  76.         -webkit-transform-origin: 50% -45px;
  77.         background: #ffa500;
  78.         border-radius: 0 0 5px 5px;
  79. }
  80.   
  81. .shui-b {
  82.         position: absolute;
  83.         top: 14px;
  84.         left: -2px;
  85.         width: 10px;
  86.         height: 10px;
  87.         background: #dc8f03;
  88.         border-radius: 50%;
  89. }
  90.   
  91. .shui-c {
  92.         position: absolute;
  93.         top: 18px;
  94.         left: -2px;
  95.         width: 10px;
  96.         height: 35px;
  97.         background: #ffa500;
  98.         border-radius: 0 0 0 5px;
  99. }
  100.   
  101. .deng:before {
  102.         position: absolute;
  103.         top: -7px;
  104.         left: 29px;
  105.         height: 12px;
  106.         width: 60px;
  107.         content: " ";
  108.         display: block;
  109.         z-index: 999;
  110.         border-radius: 5px 5px 0 0;
  111.         border: solid 1px #dc8f03;
  112.         background: #ffa500;
  113.         background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
  114. }
  115.   
  116. .deng:after {
  117.         position: absolute;
  118.         bottom: -7px;
  119.         left: 10px;
  120.         height: 12px;
  121.         width: 60px;
  122.         content: " ";
  123.         display: block;
  124.         margin-left: 20px;
  125.         border-radius: 0 0 5px 5px;
  126.         border: solid 1px #dc8f03;
  127.         background: #ffa500;
  128.         background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
  129. }
  130.   
  131. .deng-t {
  132.         font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
  133.         font-size: 3.2rem;
  134.         color: #dc8f03;
  135.         font-weight: bold;
  136.         line-height: 85px;
  137.         text-align: center;
  138. }
  139.   
  140. .night .deng-t,
  141. .night .deng-box,
  142. .night .deng-box1 {
  143.         background: transparent !important;
  144. }
  145.   
  146. @-moz-keyframes swing {
  147.         0% {
  148.                 -moz-transform: rotate(-10deg)
  149.         }
  150.   
  151.         50% {
  152.                 -moz-transform: rotate(10deg)
  153.         }
  154.   
  155.         100% {
  156.                 -moz-transform: rotate(-10deg)
  157.         }
  158. }
  159.   
  160. @-webkit-keyframes swing {
  161.         0% {
  162.                 -webkit-transform: rotate(-10deg)
  163.         }
  164.   
  165.         50% {
  166.                 -webkit-transform: rotate(10deg)
  167.         }
  168.   
  169.         100% {
  170.                 -webkit-transform: rotate(-10deg)
  171.         }
  172. }
复制代码
[table=98%,none]



也可以将样式代码直接加到主题样式文件style.css的最后。可能灯笼上的文字字号在有些主题上有点大，可以适当修改第133行的字号：font-size: 3.2rem;
如何回报帮助你解决问题的坛友，一个好办法就是给对方加【热心值】和【牛币】，加分不会扣除自己的积分，做一个热心并受欢迎的人！
回复

使用道具 举报

cqk1991325
发表于 2020-1-23 22:50 | 显示全部楼层
谢谢大牛
如何回报帮助你解决问题的坛友，一个好办法就是给对方加【热心值】和【牛币】，加分不会扣除自己的积分，做一个热心并受欢迎的人！
回复 有用 没用

使用道具 举报

yj1375
发表于 2020-1-23 22:57 | 显示全部楼层
谢谢分享
如何回报帮助你解决问题的坛友，一个好办法就是给对方加【热心值】和【牛币】，加分不会扣除自己的积分，做一个热心并受欢迎的人！
回复 有用 没用

使用道具 举报

发表于 2020-1-23 23:16 | 显示全部楼层
小手一抖，牛币拿走。
如何回报帮助你解决问题的坛友，一个好办法就是给对方加【热心值】和【牛币】，加分不会扣除自己的积分，做一个热心并受欢迎的人！
回复 有用 没用

使用道具 举报

镜语
发表于 2020-1-23 23:26 | 显示全部楼层
谢谢大佬
如何回报帮助你解决问题的坛友，一个好办法就是给对方加【热心值】和【牛币】，加分不会扣除自己的积分，做一个热心并受欢迎的人！
回复 有用 没用

使用道具 举报

ddwg0818
发表于 2020-1-24 01:07 | 显示全部楼层
感谢楼主分享！大牛有你更精彩！
如何回报帮助你解决问题的坛友，一个好办法就是给对方加【热心值】和【牛币】，加分不会扣除自己的积分，做一个热心并受欢迎的人！
回复 有用 没用

使用道具 举报

发表于 2020-1-24 10:09 | 显示全部楼层
6666
如何回报帮助你解决问题的坛友，一个好办法就是给对方加【热心值】和【牛币】，加分不会扣除自己的积分，做一个热心并受欢迎的人！
回复 有用 没用

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则


免责声明：
大牛论坛所发布的一切破解补丁、注册机和注册信息及软件的解密分析文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:daniuluntan@qq.cn

RSS订阅|手机版|小黑屋|大牛论坛 |我的广告

GMT+8, 2024-4-26 23:08 , Processed in 0.041751 second(s), 20 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表