WordPress站点添加哔哩哔哩充电样式 – B2美化

• 1.1（修复了移动端显示错误）
• 代码版本：1.0（发布）

第一步，添加 HTML

找到主题根目录下的/Modules/Templates/Single.php 文件，将第567行内容

1. <div class="content-ds-button"><button @click="show()">'.__('赞赏','b2').'</button></div>

替换为以下代码：

1. <div class="content-ds-button" @click="show()">
2. <div id="con">
3. <div id="TA-con">
4. <div id="text-con">
5. <div id="linght"></div>
6. <div id="TA">为 TA 充电</div>
7. </div>
8. </div>
9. <div id="tube-con">
10. <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
11. <path d="M1 77H234.226L307.006 24H790" stroke="#e5e9ef" stroke-width="20" />
12. <path d="M0 140H233.035L329.72 71H1028" stroke="#e5e9ef" stroke-width="20" />
13. <path d="M1 255H234.226L307.006 307H790" stroke="#e5e9ef" stroke-width="20" />
14. <path d="M0 305H233.035L329.72 375H1028" stroke="#e5e9ef" stroke-width="20" />
15. <rect y="186" width="236" height="24" fill="#e5e9ef" />
16. <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef" />
17. <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
18. <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef" />
19. <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
20. </svg>
21. <div id="mask">
22. <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
23. <path d="M1 77H234.226L307.006 24H790" stroke="#f25d8e" stroke-width="20" />
24. <path d="M0 140H233.035L329.72 71H1028" stroke="#f25d8e" stroke-width="20" />
25. <path d="M1 255H234.226L307.006 307H790" stroke="#f25d8e" stroke-width="20" />
26. <path d="M0 305H233.035L329.72 375H1028" stroke="#f25d8e" stroke-width="20" />
27. <rect y="186" width="236" height="24" fill="#f25d8e" />
28. <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e" />
29. <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
30. <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e" />
31. <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
32. </svg>
33. </div>
34. <div id="orange-mask" >
35. <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
36. <path d="M1 77H234.226L307.006 24H790" stroke="#ffd52b" stroke-width="20" />
37. <path d="M0 140H233.035L329.72 71H1028" stroke="#ffd52b" stroke-width="20" />
38. <path d="M1 255H234.226L307.006 307H790" stroke="#ffd52b" stroke-width="20" />
39. <path d="M0 305H233.035L329.72 375H1028" stroke="#ffd52b" stroke-width="20" />
40. <rect y="186" width="236" height="24" fill="#ffd52b" />
41. <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b" />
42. <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
43. <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b" />
44. <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
45. </svg>
46. </div>
47. <!--<p id="people">共 <b>361</b> 人</p>-->
48. <span id="people" v-if="data.count">共<b v-text="data.count"></b>人'.__('','b2').'</span>
50. </div>
51. </div>
52. </div>

第二步：添加 CSS 样式

在主题根目录下的 style.css文件底部添加以下 CSS 代码

1. /*赞赏
2. 版本：1.1
3. */
4. /* 设置白色容器 */
5. #con {
6. width: 350px;
7. height: 85px;
8. position: relative;
9. border-radius: 4px;
10. /*margin:50px auto;*/
11. }
12. /* 设置文本内容容器 */
13. #TA-con {
14. width: 157px;
15. height: 50px;
16. background-color: #f25d8e;
17. box-shadow: 0 4px 4px rgba(255, 112, 159, .3);
18. position: absolute;
19. top: 50%;
20. left: 5%;
21. transform: translateY(-50%);
22. border-radius: 4px;
23. cursor: pointer;
24. }
25. /* 设置文本居中容器 */
26. #text-con {
27. width: 100px;
28. height: 100%;
29. margin: 0 auto;
30. position: relative;
31. }
32. /* 做一个小闪电 */
33. #linght {
34. width: 0;
35. height: 0;
36. position: absolute;
37. top: 36%;
38. left: 4px;
39. border-color: transparent;
40. border-style: solid;
41. border-width: 10px;
42. border-top: 10px solid #fff;
43. border-radius: 4px;
44. transform: rotate(-55deg);
45. }
46. #linght::after {
47. position: absolute;
48. top: -13px;
49. left: -11px;
50. content: "";
51. width: 0;
52. height: 0;
53. border-color: transparent;
54. border-style: solid;
55. border-width: 10px;
56. border-top: 10px solid #fff;
57. transform: rotate(180deg);
58. border-radius: 4px;
59. }
60. /* 文字 */
61. #TA {
62. float: right;
63. line-height: 50px;
64. font-size: 15px;
65. color: #fff;
66. }
67. #TA-con:hover {
68. background-color: #ff6b9a;
69. }
71. /* 创建图形容器 */
72. #tube-con {
73. width: 157px;
74. height: 55px;
75. position: absolute;
76. right: -5px;
77. top: 15px;
78. }
79. /* 对 svg 图形设置宽高 */
80. .content-ds-button svg {
81. width: 100%;
82. height: 100%;
83. }
84. /* 创建一个蒙版 宽度为 0，当我 hover 充电框的时候，宽度展开 */
85. #mask {
86. width: 0px;
87. height: 100%;
88. overflow: hidden;
89. position: absolute;
90. top: 0;
91. left: 0;
92. transition:all 0.5s;
93. }
94. /* 对蒙版的 sbg 单独设置宽高，保证宽度高低有一个固定值而不是百分比 */
95. #mask svg {
96. width: 157px;
97. height: 55px;
98. }
99. /* 对充电框 hover 的时候开始动画，将粉色线条铺开 */
100. #TA-con:hover+#tube-con>#mask{
101. width:157px;
102. }
103. /* 对充电框 hover 的时候开始动画，添加黄色快速移动的动画 */
104. #TA-con:hover+#tube-con>#orange-mask{
105. animation: move1 0.5s linear 0.2s infinite;
106. }
107. #TA-con:hover+#tube-con>#orange-mask svg{
108. animation: movetwo 0.5s linear 0.2s infinite;
109. }
110. /* 创建黄色移动的蒙版 */
111. #orange-mask{
112. width: 18px;
113. height: 100%;
114. overflow: hidden;
115. position:absolute;
116. left:-15px;
117. top:0px;
118. }
119. /* 创建黄色移动的内容 */
120. #orange-mask svg {
121. position: absolute;;
122. top:0;
123. left:15px;
124. width: 157px;
125. height: 55px;
126. }
127. @keyframes move1 {
128. 0%{
129. left:-15px;
130. }
131. 100%{
132. left:140px;
133. }
134. }
135. @keyframes movetwo {
136. 0%{
137. left:15px;
138. }
139. 100%{
140. left:-140px;
141. }
142. }
143. #people{
144. position:absolute;
145. right:10px;
146. top:18px;
147. font-size:12px;
148. font-family:"雅黑";
149. color:#aaa;
150. }
151. #people>b{
152. color:#777;
153. }
155. @media screen and (max-width: 768px) {
156. .content-ds-button { top: 0px;
157. margin-top: 2em;}
158. #con {
159. width: 10em;
160. height: auto;
161. margin: 0px;
162. background: #fffcf7;
163. }
165. #TA-con {
166. width: 107px;
167. height: 40px;
168. left: 42%;
169. }
171. #linght {top: 26%;}
172. #TA {line-height: 40px;margin-right: 0.4em;}
173. #tube-con {display: none;}
174. }

补充

替换默认的糖果图标，将下列代码的图片链接替换为自己的链接。

1. /*更改图标*/
2. .b2-tang:before {
3. content: "";
4. background: url(https://www.xxx.xxx/wp-content/themes/b2child-mqzj/images/dianchifang.svg) no-repeat;
5. background-size: 19px 24px;
6. width: 19px;
7. height: 24px;
8. position: absolute;
9. margin: -26px 0px 0px -18px;
10. }

转载请注明：汇站网 » WordPress 站点添加哔哩哔哩充电样式 – B2 美化