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

2021-02-26  本文已影响0人  Hi小胡

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

效果:





上一篇 下一篇

猜你喜欢

热点阅读