进度条的实现学习这个的,这里只是记录下自己笔记
在线演示地址(原作者)
在线演示地址(添加了一个流光)
设定的范围颜色显示
80 <= --percent <= 100 绿色(green)
60 <= --percent <80 蓝色(blue)
40 <= --percent < 60 紫色(purple)
20 <= --percent < 40 桔色(orange)
0 <= --percent < 20 红色(red)
background-image
和background-size
,并设置不同的宽度,1%
,一个设置10%
,可以看到,桔色在红色的后面,红色领先了15%
,可以看到,红色被覆盖了background-image
出现了多个,并且也设置了每一个background-size
的大小,并且每一个大小都乘了100%,那么就确保了当用户输入多少–percent,上面一层的值一定会覆盖掉下面一层
.bar_shiny {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #fff;
border-radius: 10px;
opacity: 0;
animation: abc 2.4s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
}
@keyframes abc {
0% {
transform: translateX(-100%) scaleX(0);
opacity: 0.1;
}
20% {
//你设置translateX(0)也可以,只要不是正数
transform: translateX(-100%) scaleX(0);
opacity: 0.5;
}
100% {
transform: translateX(0) scaleX(1);
opacity: 0;
}
}
注意
貌似这样子也可以
@keyframes abc {
0% {
transform: translateX(-100%) ;
opacity: 0.5;
}
100% {
transform: translateX(0) ;
opacity: 0;
}
}
background-size
当中负数是不被浏览器支持的,出现了负数为什么还可以,那是浏览器自动解决了的0%
/from
和100%
/to
,浏览器将使用元素的现有样式作为起始/结束状态。这可以用来从初始状态开始元素动画,最终返回初始状态。