《CSS实战案例汇总》加载动画
Posted ren_meng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了《CSS实战案例汇总》加载动画相关的知识，希望对你有一定的参考价值。
加载动画
实现效果
html代码
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<div class="loading">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
</div>
</body>
</html>1. loading父元素下一共有6个bar元素，在css中我们通过设置bar元素样式和动画来达到加载动画的效果。
CSS代码
/* 设置加载动画元素居中 */
.loading
width: 120px;
margin: 300px auto;
/* 设置bar元素样式 */
.bar1, .bar2, .bar3, .bar4, .bar5, .bar6
width: 15px;
height: 50px;
background-color: tomato;
display: inline-block;
.bar1
animation: load-anim 1s ease-out 0.1s infinite;
.bar2
animation: load-anim 1s ease-out 0.2s infinite;
.bar3
animation: load-anim 1s ease-out 0.3s infinite;
.bar4
animation: load-anim 1s ease-out 0.4s infinite;
.bar5
animation: load-anim 1s ease-out 0.5s infinite;
.bar6
animation: load-anim 1s ease-out 0.6s infinite;
/* 加载动画 */
@keyframes load-anim
0%
transform: scale(1.0, 0.8);
30%
transform: scale(1.0, 1.5);
100%
transform: scale(1.0, 1.0);
1. 设置loading元素屏幕居中。
2. 设置各个bar元素的宽高、颜色以及动画，每个bar元素的动画开始时间不同。注意display要设置为inline-block。
以上是关于《CSS实战案例汇总》加载动画的主要内容，如果未能解决你的问题，请参考以下文章