效果演示
创建了一个充电加载动画的loading效果。
HTML
<div class="chargeloader"></div>
- 一个div元素的class为chargeloader,作为充电加载指示器。
CSS
.chargeloader {
width: 160px;
height: 80px;
border: 4px solid #00F45B;
border-right-color: transparent;
padding: 6px;
background: repeating-linear-gradient(90deg, #00F45B 0 20px, #0000 0 30px) left/0% 100% no-repeat content-box content-box;
position: relative;
animation: p5 2s infinite steps(6);
}
.chargeloader::before {
content: "";
position: absolute;
top: -4px;
bottom: -4px;
left: 100%;
width: 20px;
background: linear-gradient(#0000 calc(50% - 14px), #00F45B 0 calc(50% - 10px),
#0000 0 calc(50% + 10px), #00F45B 0 calc(50% + 14px), #0000 0) left /100% 100%,
linear-gradient(#00F45B calc(50% - 10px), #0000 0 calc(50% + 10px), #00F45B 0) left /4px 100%,
linear-gradient(#0000 calc(50% - 10px), #00F45B 0 calc(50% + 10px), #0000 0) right/4px 100%;
background-repeat: no-repeat;
}
@keyframes p5 {
100% {
background-size: 120% 100%
}
}
.chargeloader类:
- width 和 height 设置了容器的宽高。
- border 设置了边框的宽度和颜色,其中 border-right-color 设置为 transparent,使得右边的边框不可见。
- padding 添加了内边距。
- background 使用了 repeating-linear-gradient 来创建一个条纹背景,这个条纹背景会在容器的左侧显示。
- position: relative; 用于定位伪元素。
- animation 应用了一个名为 p5 的关键帧动画,这个动画每2秒无限循环,并且使用 steps(6) 来控制动画的步长。
.chargeloader::before伪元素:
- content: “”; 创建了一个伪元素。
- position: absolute; 将伪元素绝对定位。
- top、bottom 和 left 属性定位了伪元素。
- width 设置了伪元素的宽度。
- background 使用了多个 linear-gradient 来创建一个复杂的渐变背景,这个背景包含了多个颜色条。
- background-repeat: no-repeat; 确保背景图案不重复。
animation动画
- 在动画的100%(即结束时),background-size 属性被设置为 120% 100%,这意味着背景图案的宽度会被放大到容器宽度的120%,从而创建一个背景图案在移动的动画效果。