添加哔哩哔哩充电样式 - B2 美化

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

50
    </div>
51
  </div>
52
  </div>

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

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

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

165
      #TA-con {
166
          width: 107px;
167
          height: 40px;
168
          left: 42%;
169
      }
170

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
}