移动边框和背景CS等Teespring

Question

问题是：如何使其起作用并使背景（像边框一样）移动。

.class
{
    width: 100.431px;
    height: 66.8303px;
    background-image: linear-gradient(90deg,#ddd 50%,#333 0),linear-gradient(90deg,#ddd 50%,#333 0),linear-gradient(180deg,#ddd 50%,#333 0),linear-gradient(180deg,#ddd 50%,#333 0);
    background-size: 8px 1px,8px 1px,1px 8px,1px 8px;
    background-position: 0 0,0 100%,0 0,100% 0;
    background-repeat: repeat-x,repeat-x,repeat-y,repeat-y;
    -webkit-animation: marching-ants-1 .7s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
background-position: 16px 0,-16px 100%,0 -16px,100% 16px;
    -webkit-animation-play-state: running;
    animation-play-state: running;
    -webkit-animation: marching-ants-1 .7s;
    animation: marching-ants-1 .7s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    transform: matrix(1, 0, 0, 1, 182.447, 168.179);
    width: 159.105px;
    height: 83.6429px;
	}

<br>
<div class="class">
    hello world
</div>
<br>

Teespring中有一个示例。我希望仅使用CSS文件来使用它，而无需使用其他任何内容，只需CSS即可。

Answer 1

我试图从较少的CSS文件中获取一些行，并且它有效。只需将这些行放入样式代码，我就工作了。

@-webkit-keyframes marching-ants-1 {
  0% {
    background-position: 0 0,  0 100%,  0 0,  100% 0;
  }
  100% {
    background-position: 40px 0, -40px 100%, 0 -40px, 100% 40px;
  }
}
@keyframes marching-ants-1 {
  0% {
    background-position: 0 0,  0 100%,  0 0,  100% 0;
  }
  100% {
    background-position: 40px 0, -40px 100%, 0 -40px, 100% 40px;
  }
}