科技

WordPress如何给博客添加春节红灯笼挂件

单侧灯笼：

1.添加HTML代码将下面的HTML代码添加到主题页脚模板footer.php。

  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>
  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>

⒉.添加样式
将样式代码添加到WP后台→外观→自定义→额外CSS中，点击“发布”即可!

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

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

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

两边挂上双侧大红灯笼:

1.添加HTML代码

复制下面的代码到footer.php，

  1. <div class="deng-box">
  2. <div class="deng">
  3. <div class="xian"></div>
  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 class="shui-c"></div><div class="shui-b"></div></div>
  8. </div>
  9. </div>
  10. <div class="deng-box1">
  11. <div class="deng">
  12. <div class="xian"></div>
  13. <div class="deng-a">
  14. <div class="deng-b"><div class="deng-t">快乐</div></div>
  15. </div>
  16. <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
  17. </div>
  18. </div>

⒉将下面这个复制到style.css里面，WordPress可以这样:自定义一额外css，复制粘贴发布即可

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

不想在手机端显示，将这串代码复制加到上面CSS后面即可!

  1. @media (max-width: 678px){.deng-box{display:none;}}
  2. @media (max-width: 678px){.deng-box1{display:none;}}

 

相关推荐

微信扫一扫,分享到朋友圈

WordPress如何给博客添加春节红灯笼挂件
返回顶部

显示

忘记密码？

显示

显示

获取验证码

Close