开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第3天,点击查看活动详情
前言
掘友们,大家好啊。最近小编的项目中,测试已经很难找出bug了。所以,产品为了不让我闲着,提了一个需要优化的点,就很nice。因为项目中可能出现的卡片形式比较多吧,然后卡片的loading也是比较常见的,从一开始的全局loading要换成局部loading,又嫌弃人家ui库的loading,就很离谱。提到了能不能在卡片的周围加loading呢?能,当然能。
这里小编也是调研了工作,阅读了许多的帖子,后来从昔日的老同学那里找到了文章,实现了边框线条动画加载效果。
如图所示:
代码实现
html
<div>Hello</div>
css
body,
html {
width: 100%;
height: 100%;
display: flex;
}
div {
position: relative;
margin: auto;
width: 120px;
line-height: 64px;
text-align: center;
color: #fff;
font-size: 20px;
border: 2px solid gold;
border-radius: 10px;
background: gold;
transition: all .3s;
cursor: pointer;
&:active {
filter: contrast(0.9);
}
&::before,
&::after {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 2px solid gold;
transition: all .5s;
animation: clippath 3s infinite linear;
border-radius: 10px;
}
&::after {
animation: clippath 3s infinite -1.5s linear;
}
}
@keyframes clippath {
0%,
100% {
clip-path: inset(0 0 98% 0);
}
25% {
clip-path: inset(0 98% 0 0);
}
50% {
clip-path: inset(98% 0 0 0);
}
75% {
clip-path: inset(0 0 0 98%);
}
}
这里是通过,clip-path 实现边框线条动画。clip-path
CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。因为使用了 clip-path 裁剪后的元素,只有元素的剪切区域才能被显示,所以我们可以通过动画 animation 将几个关键帧绘制出来即可。
结尾
希望文章对大家有所帮助,小编会不间断的更新每天的工作内容了,遇到的小功能了什么的,喜欢的可以点个赞,或关注小编,后续更文。