0 0 6 1 - “拖尾”Loading动画 - 1.0
本帖最后由 不二如是 于 2021-8-11 09:37 编辑在60我们制作了一个很单纯的加载图标。
现在介绍一个效果更棒的加载特效“拖尾”。
主要利用linear-gradient线性渐变来设置。
好吧，先把定义扔出来，你肯定看不懂！
只是想说明一个观点：
实践永远比套路更实用！
顺便在推荐一篇好的吹水文：002d - 请像“鲨鱼”一样，一直游下去
框架和60一样，但要把之前的设置删除掉哦～
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style type="text/css">
body{
background: #000;
margin: 100px;
}
.load{}
.load::before{ }
.load::after{ }
</style>
</head>
<body>
<div class="load">Loading</div>
</body>
</html>
修改.load
.load{
text-indent: -9999px;
position: relative;
width: 202px;
height: 202px;
box-shadow: inset 0 0 0 20px rgba(255,255,255.3);
border-radius: 50%;
background: linear-gradient(to left,#fff 11%,rgba(255,255,255,0)50%);
}
重新将box-shadow设置内部阴影为20px宽，颜色30%白色透明度。
设置linear-gradient的方向为从左到右。
从右侧向左11%区域为白色，再向左到50%的位置渐变为完全透明的白色。
运用之前绘制半圆的经验，使用before伪元素来绘制1/4圆，来模仿“拖尾”。
功能还是“魔术板”。
由于渐变颜色上下一样，所以右下角，右上角都行。
考虑个人比较喜欢“下”的姿势{:10_278:} ，就右下角吧
.load::before{
position: absolute;
content: '';
width: 50%;
height: 50%;
background: #FFF;
border-radius: 0 0 101px 0;
right: 0px;
bottom: 0px;
}
效果图：
先通过border-radius生成一个上、右、左为0px，下为101px宽的1/4圆。
如果border-radius不太熟悉，请看实用 - Tips - 7 - border-radius 详解
位置就在右下角，所以right、bottom为0px。
添加after伪元素，绘制一个内部实心圆，将其他细节覆盖掉。
.load::after{
position: absolute;
background: #000;
width: 162px;
height: 162px;
border-radius: 50%;
content:'';
top: 20px;
left: 20px;
}
效果图：
看到了不，可爱的渐变圈就出来了～
大圆直径为202px，轨迹环20px宽，所以中心区域就是：
202 - 20 = 182px
恭喜你，答错了！
轨迹圈，应该是两边都算上，202 - 20*2 = 162px，Bingo！
现在只要旋转起来就行了，这个还是老办法
@keyframes load-effect {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.load{
/*其他*/
animation: load-effect 2s infinite linear;
}
效果图：
哇塞，有没有B格一下就很高呢？！
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 6 哈哈！你今天发的帖子也没啦 alltolove 发表于 2017-3-3 19:47
哈哈！你今天发的帖子也没啦
哈哈，版本恢复到昨天晚上了
明天穿越时空吧 不二如是 发表于 2017-3-3 21:26
哈哈，版本恢复到昨天晚上了
明天穿越时空吧
我晕，提醒的bug又回来了{:5_99:} alltolove 发表于 2017-3-3 21:53
我晕，提醒的bug又回来了
正在慢慢修改…
一步一步来吧 .load{
text-indent: -9999px;
position: relative;
width: 202px;
height: 202px;
box-shadow: inset 0 0 0 20px rgba(255,255,255.3);
border-radius: 50%;
background: linear-gradient(to left,#fff 11%,rgba(255,255,255,0)50%);
}
box-shadow: inset 0 0 0 20px rgba(255,255,255.3);
255.3
这里少了个逗号 交作业！
交作业 另外有一个疑问：
animation: load-effect 2s infinite linear;
这条语句，添加在.load{}中了，那么可不可以这样理解：
.load，.load::before和.load::after三个元素都会执行此动画效果呢？ 最后只为.load添加动画效果是不是属于事件的捕获，我看为.load外面加一层元素，只给它添加动画效果，子元素.load也跟着转 为啥页面的滚动条会跟着动咧？ 自己竟然慢这个程度了~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style type="text/css">
/* 清除样式 样式位置 */
* {
margin:0;
padding:0;
}
body {
background: #000;
margin:100px;
}
/* 最底层 */
.load {
text-indent: -9999px;
position:relative;
width: 200px;
height: 200px;
box-shadow: inset 0 0 0 15px rgba(255,255,255,.3);
background: linear-gradient(to left,
rgba(255,255,255) 11%,
rgba(255,255,255,0) 50%
);
border-radius: 50%;
}
/*中间层*/
.load::before {
content:'';
position:absolute;
width: 100px;
height: 200px;
/* 渐变色开始和颜色和最底层背景颜色相同 实现重合 */
background:linear-gradient(180deg,
rgba(255,255,255,0) 11%,
rgba(198,255,221) 30%,
rgba(251,215,134) 50%,
rgba(247,121,125) 90%
);
border-radius:0 100px 100px 0;
left: 100px;
}
/* 最顶层 覆盖中心多余部分 */
.load::after {
content: '';
position: absolute;
width: 170px;
height: 170px;
background: #000;
border-radius: 50%;
left: 15px;
bottom: 15px;
}
/*设置动画*/
@keyframes flash{
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
/*给 最底层的.load 添加上动画*/
.load {
animation: flash 2.5s infinite linear;
}
</style>
</head>
<body>
<div class="load">Loading</div>
</body>
</html>
页:
[1]