给博客加个喜庆的春节红灯笼分享

2020-01-2100:28:48来源：企鹅博客 9 1,601 3690字阅读12分18秒
摘要

在复制代码的时候明月发现【企鹅博客】上述代码里的中文“春”和“节”两字重复了，所以我给修正好了，大家直接复制粘贴即可，Begin主题的话直接放在主题设置——SEO里的“流量统计代码（同步）”输入框里即可，明月实测有效的哦！其它主题的话，因为代码中有中文，编辑后需要将模板文件保存为UTF-8 无BOM（无签名）的格式，后台主题编辑中修改可以忽略，上面的代码可以只加一个，个人感觉挂两个更灵动些。

今天明月在【企鹅博客】发现了一个给 WordPress 博客添加喜庆春节灯笼的 CSS 代码感觉很有春节喜庆感觉，就第一时间放到博客上了，全站都有效，各位可以浏览体验一下哦，是不是很喜庆、很可爱！独乐乐不如众乐乐，于是就分享到博客来，有兴趣的站长可以试试哦！

废话不多了，直接上代码，因为【企鹅博客】跟明月用的都是鸟哥的 Begin 主题，所以这个代码移植过来根本就不存在兼容性问题，非常完美，所以大家直接复制代码即可，先来第一段代码：

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

在复制代码的时候明月发现【企鹅博客】上述代码里的中文“春”和“节”两字重复了，所以我给修正好了，大家直接复制粘贴即可，Begin 主题的话直接放在主题设置——SEO 里的“流量统计代码（同步）”输入框里即可，明月实测有效的哦！其它主题的话，因为代码中有中文，编辑后需要将模板文件保存为 UTF-8 无 BOM（无签名）的格式，后台主题编辑中修改可以忽略，上面的代码可以只加一个，个人感觉挂两个更灵动些。

如果只想在首页显示灯笼，可以用下面的判断把上述 HTML 代码包裹起来，如：

    1. <?php if (is_home()) { ?> <!-- 代码放这里 --> <?php } ?>

最后将下面的 CSS 样式代码添加到 Begin 主题设置 →定制风格→ 自定义样式 中，点击“保存”即可：

  1. .deng-box {
  2. position: fixed;
  3. top: -40px;
  4. rightright: -20px;
  5. z-index: 999;
  6. }
  8. .deng-box1 {
  9. position: fixed;
  10. top: -30px;
  11. rightright: 10px;
  12. z-index: 999;
  13. }
  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.9);
  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 50px 4px rgba(250, 108, 0, 1);
  26. }
  28. .deng {
  29. position: relative;
  30. width: 120px;
  31. height: 90px;
  32. margin: 50px;
  33. background: #d8000f;
  34. background: rgba(216, 0, 15, 0.9);
  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. }
  41. .deng-a {
  42. width: 100px;
  43. height: 90px;
  44. background: #d8000f;
  45. background: rgba(216, 0, 15, 0.2);
  46. margin: 12px 8px 8px 8px;
  47. border-radius: 50% 50%;
  48. border: 2px solid #dc8f03;
  49. }
  51. .deng-b {
  52. width: 45px;
  53. height: 90px;
  54. background: #d8000f;
  55. background: rgba(216, 0, 15, 0.2);
  56. margin: -4px 8px 8px 26px;
  57. border-radius: 50% 50%;
  58. border: 2px solid #dc8f03;
  59. }
  61. .shui {
  62. width: 5px;
  63. height: 40px;
  64. background: #ffa500;
  65. border-radius: 0 0 5px 5px;
  66. }
  68. .shui-a {
  69. margin: -10px 0 0 40px;
  70. -webkit-animation: swing 4s infinite ease-in-out;
  71. -webkit-transform-origin: 50% -20px;
  72. }
  74. .shui-b {
  75. margin: -35px 0 0 59px;
  76. -webkit-animation: swing 4s infinite ease-in-out;
  77. -webkit-transform-origin: 50% -45px;
  78. }
  80. .shui-c {
  81. margin: -45px 0 0 77px;
  82. -webkit-animation: swing 4s infinite ease-in-out;
  83. -webkit-transform-origin: 50% -25px;
  84. }
  86. .deng:before {
  87. position: absolute;
  88. top: -7px;
  89. left: 29px;
  90. height: 12px;
  91. width: 60px;
  92. content: " ";
  93. display: block;
  94. z-index: 999;
  95. border-radius: 5px 5px 0 0;
  96. border: solid 1px #dc8f03;
  97. background: #ffa500;
  98. background: linear-gradient(to rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
  99. }
  101. .deng:after {
  102. position: absolute;
  103. bottombottom: -7px;
  104. left: 10px;
  105. height: 12px;
  106. width: 60px;
  107. content: " ";
  108. display: block;
  109. margin-left: 20px;
  110. border-radius: 0 0 5px 5px;
  111. border: solid 1px #dc8f03;
  112. background: #ffa500;
  113. background: linear-gradient(to rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
  114. }
  116. .deng-t {
  117. font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
  118. font-size: 3.2rem;
  119. color: #dc8f03;
  120. font-weight: bold;
  121. line-height: 85px;
  122. text-align: center;
  123. }
  125. .night .deng-t,
  126. .night .deng-box,
  127. .night .deng-box1 {
  128. background: transparent !important;
  129. }
  131. @-moz-keyframes swing {
  132. 0% {
  133. -moz-transform: rotate(-10deg)
  134. }
  136. 50% {
  137. -moz-transform: rotate(10deg)
  138. }
  140. 100% {
  141. -moz-transform: rotate(-10deg)
  142. }
  143. }
  145. @-webkit-keyframes swing {
  146. 0% {
  147. -webkit-transform: rotate(-10deg)
  148. }
  150. 50% {
  151. -webkit-transform: rotate(10deg)
  152. }
  154. 100% {
  155. -webkit-transform: rotate(-10deg)
  156. }
  157. }

如果不是 Begin 主题的话，可以将上述代码放置在当前主题的 style.css 文件里，如果有 CDN 缓存记得要更新一下 style.css 的缓存哦！给博客加个喜庆的春节红灯笼分享

好了，希望大家喜欢这个春节 CSS 特效并祝大家春节快乐、万事如意、阖家欢乐！！！

本文最后更新于2020年1月21日，已超过 1 年没有更新，如果文章内容或图片资源链接失效和错位的，请留言反馈，我们会及时处理，谢谢！

历史文章推荐:

  • 本博客公众号
  • 扫一扫关注！
  • weinxin
  • 本博客小程序
  • 微信内浏览本博客
  • weinxin
明月登楼
匿名

发表评论

匿名网友

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

评论：9   其中：访客  0   博主  0
    • 米扑博客 米扑博客 4
      2020-02-11 10:05 4F
      回复

      很喜庆 恭喜发财

      • 俺瞧瞧 俺瞧瞧 2
        2020-02-08 20:44 3F
        回复

        好喜庆~

        • 大话运营 大话运营 4
          2020-01-21 18:28 2F
          回复

          这个红灯笼的感觉非常喜庆

          • maqingxi maqingxi 5
            2020-01-21 08:05 1F
            回复

            喜庆，非常适合春节氛围。