CSS实现条纹背景和让背景动起来

html:

<div class="box"></div>

css:

.box{
  width:150px;
  height:150px;
  background-image: linear-gradient(
    135deg,
    #e3931a 25%,
    #edb02f 0%,
    #edb02f 50%,
    #e3931a 0,
    #e3931a 75%,
    #edb02f 0%
  );
  background-size: 25px 25px;

  animation: progressMove 4s linear infinite;
}

@keyframes progressMove {
    0% {
        background-position: 0px;
    }
    100% {
        background-position: 100px;
    }
}

效果:





最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容