注意:代码中的倒计时时长为5秒,可以根据需要自行修改。
以下是实现转账倒计时的 CSS 代码:
```css
.countdown {
display: inline-block;
padding: 0.5rem;
font-size: 1.2rem;
color: #fff;
background-color: #187bcd;
border-radius: 0.25rem;
}
.countdown:before {
content: "转账倒计时:";
font-weight: bold;
}
.countdown:after {
content: "";
display: block;
width: 100%;
height: 0.2rem;
margin-top: 0.5rem;
background-color: #187bcd;
animation: countdown-ani 5s forwards;
}
@keyframes countdown-ani {
0% {
width: 100%;
}
100% {
width: 0%;
}
}
```
使用方法:
在 HTML 中,用一个具有 `countdown` 类的元素来包裹倒计时,例如:
```html
```
然后可以使用 JavaScript 来实现倒计时的功能,并动态修改 `.countdown` 的内容即可。
注意:代码中的倒计时时长为 5 秒,可以根据需要自行修改。