进度条动画css样式_progress-bar-stripes

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

主要的样式是这样的

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
  }
}