CSS3是一款强大的样式语言,可以实现各种惊人的效果,如动画。在本教程中,我们将学习如何创建不断动画的CSS3动画。/ 创建一个循环动画 / keyframes rotate{ 0{ transfor...
CSS3是一款强大的样式语言,可以实现各种惊人的效果,如动画。在本教程中,我们将学习如何创建不断动画的CSS3动画。
/* 创建一个循环动画 */
@keyframes rotate{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
/* 将动画应用于元素 */
.element{
animation:rotate 2s linear infinite;
}
/* 解释:动画名称为“rotate”,持续时间为2秒,动画类型为线性,无限循环 */ 在上面的代码中,我们首先创建了一个名为“rotate”的动画,将其应用到一个名为“element”的元素中。在这里,我们使用属性“animation”,它使我们能够指定动画名称、持续时间、动画类型和动画循环。
我们的动画还包括一个关键帧,它告诉浏览器在动画进行时应该发生什么。在这里,我们定义了一个由0到360度旋转的变换。该变换将循环往复,使我们的元素不断旋转。
通过这个简单的示例,你现在已经了解了如何创建不断动画的CSS3动画。无限循环旋转动画只是CSS3中可以创建的各种惊人动画之一。继续探索并发现你自己独特的创意!