进度条动画css样式

好久没写样式了，今天要做一个动态的进度条，看了看别人的代码，再复习一遍吧

主要的样式是这样的

background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
animation: progress-bar-stripes 2s linear infinite;

linear-gradient 这里写的一堆是什么意思呢，就是从45deg，就是从左下角到右上角，0-25%是半透明的，25%-50%不透明，50%-75%是半透明的，75%到100%是不透明，这样就画出了一个条纹图，注意，background-image是有个默认属性是repeat的，所以就重复的出行了，

background-size是40px 40px 是一个正方形，然后动画2s背景就从这个正方形的左边走到右边，就形成了动态的一个图

然后加一个动画效果，2s线性变化一次

@keyframes progress-bar-stripes {
  from {
	background-position: 40px 0
  }

  to {
	background-position: 0 0
  }
}

最后

以上就是眯眯眼月饼为你收集整理的进度条动画css样式的全部内容，希望文章能够帮你解决进度条动画css样式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。