方块和圆形跳动正在加载中
程序员文章站
2022-09-05 23:53:01
首先我们先看一下效果如下:HTML部分如下:
首先我们先看一下效果如下:
HTML部分如下:
<div class="box">
<span class="a one"></span>
<span class="b one"></span>
<span class="c one"></span>
<span class="d one"></span>
<span class="e one"></span>
<span class="f one"></span>
<span class="g one"></span>
<span class="h one"></span>
<span class="i one"></span>
</div>
一个大的div里面九个span标签,分别给他们 一个相同的类和一个不相同的类。
CSS部分如下:
body{
background: #252A34;
}
.box{
margin: 300px auto;
width: 500px;
}
.one{
height: 30px;
width: 30px;
display: inline-block;
animation:change 1s infinite;
margin-left: 20px;
}
@keyframes change{
50%{
transform: rotate(180deg);
transform: translateY(180px);
border-radius: 50%;
}
100%{
transform: rotate(360deg);
transform: translateY(0px);
border-radius: 0%;
}
}
.a{
background:rgba(241,193,6,1.00);
animation-delay: 0.1s;
}
.b{
background: rgba(15,193,79,1.00);
animation-delay: 0.2s;
}
.c{
background:rgba(241,193,6,1.00);
animation-delay: 0.3s;
}
.d{
background: rgba(15,193,79,1.00);
animation-delay: 0.4s;
}
.e{
background:rgba(241,193,6,1.00);
animation-delay: 0.5s;
}
.f{
background: rgba(15,193,79,1.00);
animation-delay: 0.6s;
}
.g{
background:rgba(241,193,6,1.00);
animation-delay: 0.7s;
}
.h{
background: rgba(15,193,79,1.00);
animation-delay: 0.8s;
}
.i{
background:rgba(241,193,6,1.00);
animation-delay: 0.9s;
}
这里给大家解说一下:
rotate:旋转
translate:位移
关键帧的创建:
0%和 100%之间可以创建多个百分比,分别给每个百分比中给需要有动画
效果的元素加上不同的样式;
0%和 100%可以使用关键词 from 和 to 来表示。
本文地址:https://blog.csdn.net/weixin_55108422/article/details/113997044
上一篇: 官员辞职回乡,半路被拦截改变半生命运
下一篇: 抖音如何禁止别人查看我的喜欢列表?
推荐阅读