效果演示
这段代码创建了一个带有复杂纹理和动画效果的全自动洗衣机loading效果。
HTML
<div class="washingloader"></div>
- 一个div元素的class为washingloader，这个元素将作为一个加载指示器。
CSS
.washingloader {
width: 120px;
height: 150px;
background-color: #fff;
background-repeat: no-repeat;
background-image: linear-gradient(#ddd 50%, #bbb 51%),
linear-gradient(#ddd, #ddd), linear-gradient(#ddd, #ddd),
radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%),
radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%),
radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%);
background-position: 0 20px, 45px 0, 8px 6px, 55px 3px, 75px 3px, 95px 3px;
background-size: 100% 4px, 1px 23px, 30px 8px, 15px 15px, 15px 15px, 15px 15px;
position: relative;
border-radius: 6%;
animation: shake 3s ease-in-out infinite;
transform-origin: 60px 180px;
}
.washingloader:before {
content: "";
position: absolute;
left: 5px;
top: 100%;
width: 7px;
height: 5px;
background: #aaa;
border-radius: 0 0 4px 4px;
box-shadow: 102px 0 #aaa;
}
.washingloader:after {
content: "";
position: absolute;
width: 95px;
height: 95px;
left: 0;
right: 0;
margin: auto;
bottom: 20px;
background-color: #bbdefb;
background-image: linear-gradient(to right, #0004 0%, #0004 49%, #0000 50%, #0000 100%),
linear-gradient(135deg, #64b5f6 50%, #607d8b 51%);
background-size: 30px 100%, 90px 80px;
border-radius: 50%;
background-repeat: repeat, no-repeat;
background-position: 0 0;
box-sizing: border-box;
border: 10px solid #DDD;
box-shadow: 0 0 0 4px #999 inset, 0 0 6px 6px #0004 inset;
animation: spin 3s ease-in-out infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg)
}
50% {
transform: rotate(360deg)
}
75% {
transform: rotate(750deg)
}
100% {
transform: rotate(1800deg)
}
}
@keyframes shake {
65%,
80%,
88%,
96% {
transform: rotate(0.5deg)
}
50%,
75%,
84%,
92% {
transform: rotate(-0.5deg)
}
0%,
50%,
100% {
transform: rotate(0)
}
}
.washingloader类：
- 设置了宽度为120px，高度为150px，背景颜色为白色。
- 通过多个linear-gradient和radial-gradient组合创建了复杂的背景图案，包括线条、椭圆等形状，用于模拟某种机械结构或纹理。
- background-position和background-size属性用于调整这些背景图案的位置和大小。
- position: relative使该元素成为相对定位的容器，以便内部的伪元素可以相对于它进行定位。
- border-radius: 6%为元素添加了一定程度的圆角。
- animation: shake 3s ease-in-out infinite应用了一个名为shake的动画，以实现元素的晃动效果，动画持续时间为 3 秒，具有缓入缓出效果且无限循环。
- transform-origin: 60px 180px设置了变换的原点，用于控制动画的中心点。
.washingloader:before伪元素：
- 使用绝对定位，在.washingloader元素的底部左侧创建一个小三角形，颜色为#aaa（浅灰色），并通过box-shadow在右侧创建一个相同的三角形以模拟某种连接或延伸效果。
.washingloader:after伪元素：
- 同样使用绝对定位，在.washingloader元素内部居中创建一个较大的圆形元素。
- 通过复杂的背景图案设置，包括线性渐变和径向渐变，创建了一种带有纹理和阴影效果的圆形外观。
- border-radius: 50%使其成为一个完美的圆形。
- box-sizing: border-box确保边框和内边距包含在元素的宽度和高度内。
- border: 10px solid #DDD添加了一个灰色的边框。
- box-shadow: 0 0 0 4px #999 inset, 0 0 6px 6px #0004 inset添加了两个内阴影效果，用于增强立体感。
animation动画
- animation: spin 3s ease-in-out infinite应用了一个名为spin的动画，使圆形伪元素进行旋转，动画持续时间为 3 秒，具有缓入缓出效果且无限循环。
- @keyframes spin：定义了旋转动画的关键帧，从初始状态的不旋转，到中间状态的旋转 360 度，再到不同角度的旋转，最后回到初始状态，实现了循环旋转的效果。
- @keyframes shake：定义了晃动动画的关键帧，通过在不同的百分比阶段设置不同的旋转角度，实现了元素的轻微晃动效果。
