我有以下GIF animated文件:



是否可以仅使用CSS3并仅使用1个类来实现?我尝试了以下方法:


带有垂直条纹的背景图像
将这些条纹从左向右移动
将背景图片旋转45度
再次添加同一张图片
将其放置在上一张图像旁边
使用相同的keyframe并将其旋转90度



这是我的尝试:fiddle,但我坚持使用它。

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

谢谢

最佳答案

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

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


以便有足够的背景覆盖元素的大小和运动

关于css3 - 是否可以在CSS3中创建以下动画?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20809413/

10-11 13:03
查看更多