|
16 | 16 | display: flex; |
17 | 17 | justify-content: center; |
18 | 18 | align-items: center; |
| 19 | +background-color:rgb(0,0,0); |
19 | 20 | } |
20 | 21 |
|
21 | 22 | .content { |
|
36 | 37 | margin-bottom:1vw; |
37 | 38 | background-color: coral; |
38 | 39 | border-radius:0.5vw; |
39 | | -font-size:0.6vw; |
| 40 | +font-size:0.5vw; |
40 | 41 | } |
41 | 42 |
|
42 | 43 | /* 点击事件 */ |
|
54 | 55 | margin-bottom:1vw; |
55 | 56 | background-color: coral; |
56 | 57 | border-radius:0.5vw; |
57 | | -font-size:0.6vw; |
| 58 | +font-size:0.5vw; |
58 | 59 | } |
59 | 60 |
|
60 | 61 | /* 点击事件 */ |
|
70 | 71 | position: relative; |
71 | 72 | margin-bottom:1.6vw; |
72 | 73 | } |
73 | | -/* 上面突出的那一部分 */ |
74 | | - .battery::before { |
75 | | -content:""; |
76 | | -position: absolute; |
77 | | -width:2.6vw; |
78 | | -height:1.2vw; |
79 | | -background-color:rgb(0,0,0); |
80 | | -top:-1.2vw; |
81 | | -left:50%; |
82 | | -transform:translate(-50%); |
83 | | -border-top-left-radius:0.5vw; |
84 | | -border-top-right-radius:0.5vw; |
85 | | - } |
86 | 74 | /* 充的电 */ |
87 | 75 | .batteryNum { |
88 | 76 | position: absolute; |
|
96 | 84 | ); |
97 | 85 | bottom:0; |
98 | 86 | left:0; |
99 | | -top:80%; |
100 | 87 | border-radius:0.5vw; |
101 | 88 | /* 动画属性 */ |
102 | | -animation: charge5s linear infinite; |
| 89 | +animation: charge5s linear1 forwards; |
| 90 | + } |
| 91 | + .water { |
| 92 | +position: absolute; |
| 93 | +width:5.2vw; |
| 94 | +top:0; |
| 95 | +left:0; |
| 96 | +bottom:0; |
| 97 | +border-radius:0.5vw; |
| 98 | +z-index:10; |
| 99 | +overflow: hidden; |
| 100 | + } |
| 101 | + .waterOne { |
| 102 | +width:20.8vw; |
| 103 | +height:20.8vw; |
| 104 | +border-radius:40%48%; |
| 105 | +background:rgba(255,255,255,1); |
| 106 | +left:50%; |
| 107 | +position: absolute; |
| 108 | +/* 动画属性 */ |
| 109 | +animation: waterOne5s linear1 forwards; |
| 110 | + } |
| 111 | + .waterTwo { |
| 112 | +width:20.8vw; |
| 113 | +height:20.8vw; |
| 114 | +border-radius:32%40%; |
| 115 | +background:rgba(255,255,255,1); |
| 116 | +position: absolute; |
| 117 | +left:50%; |
| 118 | +/* 动画属性 */ |
| 119 | +animation: waterTwo5s linear1 forwards; |
103 | 120 | } |
104 | 121 | /* 充电的动画 */ |
105 | 122 | @keyframes charge { |
106 | 123 | 0% { |
107 | | -top:80%; |
| 124 | +top:100%; |
108 | 125 | filter:hue-rotate(90deg); |
109 | 126 | } |
110 | 127 | 50% { |
|
116 | 133 | filter:hue-rotate(0deg); |
117 | 134 | } |
118 | 135 | } |
| 136 | +/* 水纹动画1 */ |
| 137 | +@keyframes waterOne { |
| 138 | +0% { |
| 139 | +transform:translate(-50%)rotate(0deg); |
| 140 | +bottom:0; |
| 141 | + } |
| 142 | +100% { |
| 143 | +transform:translate(-50%)rotate(360deg); |
| 144 | +bottom:10.4vw; |
| 145 | + } |
| 146 | + } |
| 147 | +/* 水纹动画2 */ |
| 148 | +@keyframes waterTwo { |
| 149 | +0% { |
| 150 | +transform:translate(-50%)rotate(0deg); |
| 151 | +bottom:0; |
| 152 | + } |
| 153 | +100% { |
| 154 | +transform:translate(-50%)rotate(360deg); |
| 155 | +bottom:10.4vw; |
| 156 | + } |
| 157 | + } |
119 | 158 | </style> |
120 | 159 | </head> |
121 | 160 | <body> |
122 | 161 | <divclass="content"> |
123 | 162 | <divclass="battery"> |
| 163 | +<!-- 充的电量 --> |
124 | 164 | <divclass="batteryNum"></div> |
| 165 | +<!-- 水波纹 --> |
| 166 | +<divclass="water"> |
| 167 | +<!-- 因为需要获取节点，所以设置两个元素，使用伪元素写不方便 --> |
| 168 | +<divclass="waterOne"></div> |
| 169 | +<divclass="waterTwo"></div> |
| 170 | +</div> |
125 | 171 | </div> |
126 | 172 | <divclass="option"> |
127 | 173 | <divclass="start">开始充电</div> |
|
130 | 176 | </div> |
131 | 177 | <script> |
132 | 178 | // 获取相关节点 |
133 | | -letbatteryNumDom=document.querySelector(".batteryNum"); |
134 | | -console.log(batteryNumDom); |
| 179 | +conststartDOM=document.querySelector(".start"); |
| 180 | +constbatteryNumDOM=document.querySelector(".batteryNum"); |
| 181 | +conststopDOM=document.querySelector(".stop"); |
| 182 | +constwaterOne=document.querySelector(".waterOne"); |
| 183 | +constwaterTwo=document.querySelector(".waterTwo"); |
| 184 | +batteryNumDOM.style.animationPlayState="paused"; |
| 185 | +waterOne.style.animationPlayState="paused"; |
| 186 | +waterTwo.style.animationPlayState="paused"; |
135 | 187 | // 充电事件 |
136 | | -batteryNumDom.onclick=function(){ |
137 | | -console.log("1111"); |
138 | | -}; |
| 188 | +startDOM.addEventListener("click",()=>{ |
| 189 | +batteryNumDOM.style.animationPlayState="running"; |
| 190 | +waterOne.style.animationPlayState="running"; |
| 191 | +waterTwo.style.animationPlayState="running"; |
| 192 | +}); |
139 | 193 | // 停止充电事件 |
| 194 | +stopDOM.addEventListener("click",()=>{ |
| 195 | +batteryNumDOM.style.animationPlayState="paused"; |
| 196 | +waterOne.style.animationPlayState="paused"; |
| 197 | +waterTwo.style.animationPlayState="paused"; |
| 198 | +}); |
140 | 199 | </script> |
141 | 200 | </body> |
142 | 201 | </html> |