css写骨架屏动画
时间: 2023-07-25 15:14:52 浏览: 87
要使用CSS实现骨架屏动画,可以通过以下步骤来完成:
1. 定义HTML结构,包括需要进行动画的部位和骨架框架;
2. 编写CSS样式,为每个部位定义好位置、颜色、边框等基本属性,并使用动画过渡效果(transition)让骨架屏逐渐变成实际内容;
3. 在HTML中使用类名或ID来添加动画效果,触发动画。
以下是一个简单的骨架屏动画的代码示例:
HTML代码:
```
<div class="skeleton">
<div class="head"></div>
<div class="body"></div>
<div class="arms">
<div class="left-arm"></div>
<div class="right-arm"></div>
</div>
<div class="legs">
<div class="left-leg"></div>
<div class="right-leg"></div>
</div>
</div>
```
CSS代码:
```
.skeleton {
position: relative;
width: 300px;
height: 400px;
margin: 50px auto;
background-color: #f8f8f8;
border: 1px solid #dcdcdc;
}
.head {
position: absolute;
top: 10%;
left: 45%;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #dcdcdc;
transition: background-color 0.5s ease;
}
.body {
position: absolute;
top: 30%;
left: 35%;
width: 30%;
height: 40%;
background-color: #dcdcdc;
transition: background-color 0.5s ease;
}
.arms {
position: absolute;
top: 30%;
left: 25%;
}
.left-arm {
position: absolute;
top: 0;
left: 0;
width: 30%;
height: 60%;
background-color: #dcdcdc;
transform-origin: 100% 50%;
animation: wave 2s infinite;
transition: background-color 0.5s ease;
}
.right-arm {
position: absolute;
top: 0;
right: 0;
width: 30%;
height: 60%;
background-color: #dcdcdc;
transform-origin: 0% 50%;
animation: wave 2s infinite;
transition: background-color 0.5s ease;
}
.legs {
position: absolute;
bottom: 0;
left: 25%;
}
.left-leg {
position: absolute;
top: 0;
left: 0;
width: 30%;
height: 60%;
background-color: #dcdcdc;
transform-origin: 100% 0%;
animation: swing 2s infinite;
transition: background-color 0.5s ease;
}
.right-leg {
position: absolute;
top: 0;
right: 0;
width: 30%;
height: 60%;
background-color: #dcdcdc;
transform-origin: 0% 0%;
animation: swing 2s infinite;
transition: background-color 0.5s ease;
}
.skeleton.loaded .head,
.skeleton.loaded .body,
.skeleton.loaded .left-arm,
.skeleton.loaded .right-arm,
.skeleton.loaded .left-leg,
.skeleton.loaded .right-leg {
background-color: #fff;
}
@keyframes wave {
0%, 100% {
transform: rotate(0deg);
}
50% {
transform: rotate(45deg);
}
}
@keyframes swing {
0%, 100% {
transform: rotate(0deg);
}
50% {
transform: rotate(30deg);
}
}
```
在这个示例中,我们定义了一个名为.skeleton的div元素,作为骨架屏的容器,并在其中定义了头部、身体、手臂和腿部等部位的样式。我们使用transition属性将这些部位的背景颜色从灰色渐变到白色,实现了骨架屏逐渐变成实际内容的过渡效果。我们还定义了.skeleton.loaded类,用于在加载完内容后添加到骨架屏上,触发过渡效果的执行。