我有以下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/