是否可以在CSS3中创建以下动画？

Question

我有以下GIF animated文件：

是否可以仅使用CSS3并仅使用1个类来制作它？我尝试过以下方法：

1. 拥有垂直条纹的背景图片
2. 从左向右移动这些条纹
3. 旋转背景图片45degrees
4. 再次添加相同的图片
5. 将其放在上一张图片旁边
6. 使用相同的keyframe并将其旋转90度
7. 等等

这是我的尝试：fiddle，但我坚持使用它。

这需要仅使用1个类运行（允许多个pseudo elements）。我希望这是可能的。

由于

Answer 1

这是我的解决方案，仅使用一个元素

<div class="test">
</div>

没有图像（只有渐变） CSS

.test{
    position: absolute;
    width: 400px;
    height: 400px;
    left: 20px;
    top: 20px;
    border: solid 2px blue;
}

.test:before {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0px;
    background-image: repeating-linear-gradient(135deg, white 10px, black 20px), 
                      repeating-linear-gradient(45deg, white 10px, blue 20px);
    background-size: 120% 50%;
    background-position: top left, bottom left;
    background-repeat: no-repeat;
     -webkit-animation: move 1s infinite linear; 
}

.test:after {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0px;
    background-image: repeating-linear-gradient(45deg, white 10px, green 20px), 
                      repeating-linear-gradient(135deg, white 10px, yellow 20px);
    background-size: 120% 50%;
    background-position: top left, bottom left;
    background-repeat: no-repeat;
    -webkit-animation: move 1s infinite linear reverse; 
}

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

webkit demo

由于我已经使用了渐变的Css3语法，如果你想在旧浏览器中看到它，你需要设置等价。

我已经设置了不同颜色的不同元素，以便更容易看出它是什么。

更新了演示以处理80px div

demo

我已将背景大小更改为

.test:before,
.test:after {
    background-size: 120px 50%;
}

因此，有足够的背景可以对元素和运动的大小进行分析