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

2020-01-2100:28:48来源:企鹅博客 9 502
摘要

在复制代码的时候明月发现【企鹅博客】上述代码里的中文“春”和“节”两字重复了,所以我给修正好了,大家直接复制粘贴即可,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. positionfixed;
  3. top: -40px;
  4. rightright: -20px;
  5. z-index: 999;
  6. }
  7. .deng-box1 {
  8. positionfixed;
  9. top: -30px;
  10. rightright10px;
  11. z-index: 999;
  12. }
  13. .deng-box1 .deng {
  14. positionrelative;
  15. width120px;
  16. height90px;
  17. margin50px;
  18. background#d8000f;
  19. background: rgba(216, 0, 15, 0.9);
  20. border-radius: 50% 50%;
  21. -webkit-transform-origin: 50% -100px;
  22. -webkit-animation: swing 5s infinite ease-in-out;
  23. box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
  24. }
  25. .deng {
  26. positionrelative;
  27. width120px;
  28. height90px;
  29. margin50px;
  30. background#d8000f;
  31. background: rgba(216, 0, 15, 0.9);
  32. border-radius: 50% 50%;
  33. -webkit-transform-origin: 50% -100px;
  34. -webkit-animation: swing 3s infinite ease-in-out;
  35. box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
  36. }
  37. .deng-a {
  38. width100px;
  39. height90px;
  40. background#d8000f;
  41. background: rgba(216, 0, 15, 0.2);
  42. margin12px 8px 8px 8px;
  43. border-radius: 50% 50%;
  44. border2px solid #dc8f03;
  45. }
  46. .deng-b {
  47. width45px;
  48. height90px;
  49. background#d8000f;
  50. background: rgba(216, 0, 15, 0.2);
  51. margin: -4px 8px 8px 26px;
  52. border-radius: 50% 50%;
  53. border2px solid #dc8f03;
  54. }
  55. .shui {
  56. width5px;
  57. height40px;
  58. background#ffa500;
  59. border-radius: 0 0 5px 5px;
  60. }
  61. .shui-a {
  62. margin: -10px 0 0 40px;
  63. -webkit-animation: swing 4s infinite ease-in-out;
  64. -webkit-transform-origin: 50% -20px;
  65. }
  66. .shui-b {
  67. margin: -35px 0 0 59px;
  68. -webkit-animation: swing 4s infinite ease-in-out;
  69. -webkit-transform-origin: 50% -45px;
  70. }
  71. .shui-c {
  72. margin: -45px 0 0 77px;
  73. -webkit-animation: swing 4s infinite ease-in-out;
  74. -webkit-transform-origin: 50% -25px;
  75. }
  76. .deng:before {
  77. positionabsolute;
  78. top: -7px;
  79. left29px;
  80. height12px;
  81. width60px;
  82. content" ";
  83. displayblock;
  84. z-index: 999;
  85. border-radius: 5px 5px 0 0;
  86. bordersolid 1px #dc8f03;
  87. background#ffa500;
  88. background: linear-gradient(to rightright#dc8f03#ffa500#dc8f03#ffa500#dc8f03);
  89. }
  90. .deng:after {
  91. positionabsolute;
  92. bottombottom: -7px;
  93. left10px;
  94. height12px;
  95. width60px;
  96. content" ";
  97. displayblock;
  98. margin-left20px;
  99. border-radius: 0 0 5px 5px;
  100. bordersolid 1px #dc8f03;
  101. background#ffa500;
  102. background: linear-gradient(to rightright#dc8f03#ffa500#dc8f03#ffa500#dc8f03);
  103. }
  104. .deng-t {
  105. font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
  106. font-size: 3.2rem;
  107. color#dc8f03;
  108. font-weightbold;
  109. line-height85px;
  110. text-aligncenter;
  111. }
  112. .night .deng-t,
  113. .night .deng-box,
  114. .night .deng-box1 {
  115. backgroundtransparent !important;
  116. }
  117. @-moz-keyframes swing {
  118. 0% {
  119. -moz-transform: rotate(-10deg)
  120. }
  121. 50% {
  122. -moz-transform: rotate(10deg)
  123. }
  124. 100% {
  125. -moz-transform: rotate(-10deg)
  126. }
  127. }
  128. @-webkit-keyframes swing {
  129. 0% {
  130. -webkit-transform: rotate(-10deg)
  131. }
  132. 50% {
  133. -webkit-transform: rotate(10deg)
  134. }
  135. 100% {
  136. -webkit-transform: rotate(-10deg)
  137. }
  138. }

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

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

历史文章推荐:

  • 本博客公众号
  • 扫一扫关注!
  • weinxin
  • 本博客小程序
  • 微信内浏览本博客
  • weinxin

发表评论

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

目前评论:9   其中:访客  5   博主  4

    • 米扑博客 米扑博客 4

      很喜庆 恭喜发财

      • 俺瞧瞧 俺瞧瞧 1

        好喜庆~

        • 大话运营 大话运营 4

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

          • maqingxi maqingxi 4

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