css背景动画_多个背景CSS动画

最新推荐文章于 2024-08-31 09:27:14 发布

culuo8053

最新推荐文章于 2024-08-31 09:27:14 发布

阅读量293

点赞数

文章标签：列表 css css3 html python

原文链接：https://davidwalsh.name/multiple-background-css-animations

版权

本文介绍了如何使用CSS在同一个元素上实现多个背景动画。通过用逗号分隔背景图像并调整背景位置，可以在一个元素内创建多个移动部分。然而，这种方法的限制在于无法为每个背景图像独立设置不同的动画持续时间。

摘要由CSDN通过智能技术生成

css背景动画

CSS background animation has been a hot topic for a long time, mostly because they look pretty sweet and don't require additional elements. I was recently asked if it was possible to have multiple background animations on a given element and the answer is yes...with concessions. Let's take a look at how it's done!

长期以来， CSS背景动画一直是热门话题，这主要是因为它们看起来很漂亮，并且不需要其他元素。最近有人问我，是否可以在给定的元素上使用多个背景动画，答案是肯定的……有让步。让我们看看它是如何完成的！

View Demo 观看演示

CSS (The CSS)

So multiple background images on an element is something we've been able to do for quite a while now, simply separate them with commas:

因此，一个元素上的多个背景图像是我们已经可以使用一段时间的功能，只需用逗号将它们分开即可：


.animate-area	{ 
	background-image: url(twitter-logo-bird.png), url(treehouseFrog.png), url(bg-clouds.png);
	background-position: 20px -90px, 30px 80px, 0px 0px;
	background-repeat: no-repeat, no-repeat, repeat-x;
}

Note that the background image that you want at the top of the stack should go first in the image list. Animating the backgrounds requires moving the background-position, also separated by commas:

请注意，想要放在堆栈顶部的背景图像应该在图像列表中排在第一位。对背景进行动画处理需要移动背景位置，该位置也以逗号分隔：


@keyframes animatedBird {
	from { background-position: 20px 20px, 30px 80px, 0 0; }
	to { background-position: 300px -90px, 30px 20px, 100% 0; }
}
		
.animate-area	{ 
	animation: animatedBird 4s linear infinite;
}

The result is three moving pieces inside one element!

结果是在一个元素中包含了三个可移动的块！

View Demo 观看演示

Of course this isn't an ideal case because you can't separately change background-positions and thus you need to work with the same duration for each background image. Multiple animations can be set on selectors with CSS, but since it's the one property being changed, we're just out of luck!

当然，这不是理想的情况，因为您不能单独更改背景位置，因此您需要为每个背景图像使用相同的持续时间。可以使用CSS在选择器上设置多个动画，但是由于这是一个要更改的属性，因此我们很不走运！