前端进度条和进度条流光效果

前言

有话要说

  • 差不多是这样子吧,设置多个background-imagebackground-size,并设置不同的宽度,
  • 我们挑选2个来看,设置宽度看看,一个设置1%,一个设置10%,可以看到,桔色在红色的后面,红色领先了
  • 我们设置桔色宽度高一点,看看会怎么样,桔色设置了15%,可以看到,红色被覆盖了

那么为什么--percent:60的时候是紫色?

  • 我们先明白下,background-image出现了多个,并且也设置了每一个background-size的大小,并且每一个大小都乘了100%,那么就确保了当用户输入多少--percent,上面一层的值一定会覆盖掉下面一层
    • 比如,当中--percent:1的时候,上面计算浏览器渲染宽度都是为0,但是最底层红色的宽度为100%就会渲染为红色,只有但指定--percent达到设定的颜色阶度的时候,就才会覆盖掉与之对应颜色的下面一层
    • 精妙就在这里,犹豫图层不是被覆盖的关系,而是折叠的关系,这就需要我们上一层一定要大于下一层才会覆盖掉下一层的颜色,所以不管你取什么值,在对应阶层下才会出现正数(且比是大于1的)
  • 那么我们再来看看--percent:61的时候为什么是蓝色

流光效果

  • 就像下面总而言之,有一个流光效果
  • 添加下面代码就可以了
    • 来自antd的keyframes
css 复制代码
.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;
  }
}
  • 注意

    • 流光的div一层,不可以设置transformX的值为正数,否则会出现滚动条(横向)
  • 貌似这样子也可以

css 复制代码
@keyframes abc {
  0% {
    transform: translateX(-100%) ;
    opacity: 0.5;
  }
  100% {
    transform: translateX(0) ;
    opacity: 0;
  }
}

注意点

  • background-size当中负数是不被浏览器支持的,出现了负数为什么还可以,那是浏览器自动解决了的
  • 如果一个关键帧规则没有指定动画的开始或结束状态(也就是,0%/from100%/to,浏览器将使用元素的现有样式作为起始/结束状态。这可以用来从初始状态开始元素动画,最终返回初始状态。
相关推荐
LuciferHuang7 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing7 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20157 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言8 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手9 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言9 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友10 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手10 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿11 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉