转圈的效果:
方法实现一:
.loading_circle1 {
width: 48px;
height: 48px;
border-width: 0 0 1px 1px;
border-style: solid;
border-color: green;
border-radius: 50%;
animation: loading 1s linear infinite;
overflow: hidden;
}
@keyframes loading {
0% { transform: rotate(0); }
100% { transform: rotate(360deg);}
}
<div class='loading_circle1'></div>
效果如下:
方法实现二:
使用mask-image的实现,但只有webkit
内核的浏览器支持mask属性,所以需考虑到兼容性问题
这里主要使用到了conic-gradient
的锥形渐变与radial-gradient
径向渐变 - 实现
// 使用mask的形式
.loading_circle2 {
width: 48px;
height: 48px;
border-radius: 50%;
background: conic-gradient(deepskyblue, 30%, white); // 锥形渐变实现一个半圆的效果
--mask: radial-gradient(closest-side, transparent 75%, black 76%); // 径向渐变实现一个蒙版的效果
-webkit-mask-image: var(--mask);
mask-image: var(--mask);
animation: loading 1s linear infinite reverse;
}
@keyframes loading {
0% { transform: rotate(0); }
100% { transform: rotate(360deg);}
}
<div class='loading_circle2'></div>
效果如下:
mask-image的使用:点击跳转查看
文字加载二:
span {
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
span::before {
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
// step-end 会使 keyframes 动画到了定义的关键帧处直接突变,并没有变化的过程
animation: dot 3s infinite step-start both;
}
@keyframes dot {
33% { transform: translateY(-2em); }
66% { transform: translateY(-1em); }
}
<div>
正在加载中<span></span>
</div>
效果如下图:
此方法来自张鑫旭《css世界》的书籍,是本很不错的
css
认知书籍!强力安利,对css
的建立全新的认知
点击进入到作者的博客
animation属性值
[ animation-name ]:名称,@keyframes name
[ animation-duration ]:持续时间 3s
[ animation-timing-function ]:过渡类型
linear
:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease
:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in
:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out
:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out
:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
[ animation-delay ]:延迟的时间
[ animation-iteration-count ]:循环次数
none
:默认值
infinite
:无限循环
[ animation-direction ]:是否反向运动
normal
:正常方向 在这里插入代码片
alternate
:正常与反向交替
[ animation-fill-mode} : 停止之后的属性
none
:默认值
forwards
:第一帧中的状态
backwards
: 保持最后一帧的状态
both
:表示上面两者模式都被应用