龙空技术网

一文看懂CSS3动画

湖辣 124

前言:

今天咱们对“css和css3”大体比较关切,我们都需要学习一些“css和css3”的相关文章。那么小编同时在网络上搜集了一些对于“css和css3””的相关知识,希望看官们能喜欢,咱们一起来了解一下吧!

本文将使用CSS3动画keyframes创建一个页面加载器,加载时带着三个黄色圆点破浪形移动。它将向您展示如何为加载页面设计HTML样式,创建动画的keyframes,并使用keyframes的动画延迟。

以下是你将在本教程结束时制作的内容。

图中的三个黄色圆点,在页面加载过程中,呈现波浪形的跳动。

首先,先创建一个基本的html文件:

<p>A simple representation of an animated bouncing loader!</p>

<div class="loader">

<span></span>

<span></span>

<span></span>

</div>

文中添加了一个名为loader类的div。这个div负责创建所有页面加载器元素。在这个div中,添加了三个连续的span元素,每个元素表示一个页面加载器圆点。

第二步为页面定义基本的CSS:

/*_ OPTIONAL: Styles for the demo. *_/

body {

background: #2C294F;

padding: 2rem;

}

p {

font: 1rem/1.45 "Operator Mono";

color: #A599E9;

text-align: center;

}

这个代码块定义了p标记和主体的可选CSS样式。背景颜色,字体大小等属性可以根据自己的爱好更改。不过这些都不是动画所必须的样式,只是为了方便呈现动画效果。

关键的定义是下面的.loader样式:

/_ CSS for animated bouncing loader. _/

.loader {

display: flex;

justify-content: center;

align-items: center;

}

这里我们使用Flexbox,也就是display:flex; 它将弹跳的页面加载器水平和垂直放置在页面中间。

/_ Loader circles _/

.loader > span {

background: #FAD000;

border-radius: 50%;

margin: 5rem 0.5rem;

animation: bouncingLoader 0.6s infinite alternate;

}

.loader > span:nth-child(2) {

animation-delay: 0.2s;

}

.loader > span:nth-child(3) {

animation-delay: 0.4s;

}

默认情况下,页面加载器的形状是方形的。我们要给它一个圆形形状,可以将边界半径设置为50%。.loader > span:nth-child(n)是指loader父元素下的第n个子元素。animation-delay是动画延迟时间。

这里最有趣的部分是animation属性。我们使用了一个名为bouncingLoader的动画keyframes,它每0.6s运行一次,并且无限重复。

定义动画的keyframes。keyframes用于定义动画行为,并让我们完全控制CSS动画的一个周期。我们将它定义为@keyframes,后面跟着动画的名字,在本例中是bouncingLoader。

在@keyframe规则中,使用from和to两个关键字来指定动画的起始点和结束点。同样地,你也可以用0%表示起点,用100%表示动画的终点。

此外,如果您想要多个动画转换,您可以定义一个百分比范围,每个百分比包含一个样式选择器列表。这些百分比可以以任何顺序列出。这些百分比的简单表示如下所示:

/_ Define the animation called bouncingLoader. _/

@keyframes bouncingLoader {

from {

width: 0.1rem;

height: 0.1rem;

opacity: 1;

transform: translate3d(0);

}

to {

width: 1rem;

height: 1rem;

opacity: 0.1;

transform: translate3d(0, -1rem, 0);

}

}

这使用了from和to关键字,它们定义了圆点的宽度、高度和不透明度等基本样式属性。Loader中每个圆圈的宽和高从0.1rem到width:1rem;和height:1rem; 除此之外,为了创建弹跳效果,使用CSS transform属性更改给定元素的坐标,从而转换每个圆点的位置。

使用这个transform属性,采用了translate3D()函数,它接受三个输入来解释(x, y, z)坐标的变化。因为我们希望我们的装载机在波动运动中运行,我们需要主要沿着y轴平移,保持x轴和z轴不变。因此,结束点的值为(0,-1rem, 0)。

最后一部分。既然已经为@keyframe编写了代码,现在就该设置并运行它了。动画的运行是通过以下几行代码实现的(上面已显示过一次):

/_ Loader circles _/

.loader > span {

background: #FAD000;

border-radius: 50%;

margin: 5rem 0.5rem;

animation: bouncingLoader 0.6s infinite alternate;

}

.loader > span:nth-child(2) {

animation-delay: 0.2s;

}

.loader > span:nth-child(3) {

animation-delay: 0.4s;

}

使用animation属性和/或它的子属性对想要动画的元素进行样式设置。使用此属性可以控制动画的时间、持续时间和其他细节。

这里你已经使用了以下动画的子属性:

animation: animation-name, animation-duration, animation-iteration-count, animation-direction;

animation-name: 定义你的动画的名字,在我的例子中是加载器。

animation-duration: 配置动画完成一个循环的时间长度。

animation-iteration-count: 表示你希望动画循环在停止前播放多少次。

animation-direction: 定义动画播放的方向。

除了这些,还有其他几个子属性。你可以在Mozilla Web文档中获得详细信息。

基于这些,本文的动画定义如下:

animation: bouncingLoader 0.6s infinite alternate;

这行代码做了以下三件事:

告诉loader元素使用keyframes bouncingLoader。

设置动画的长度为0.6秒。

无限次地运行动画。在完成一个循环后,动画的方向就会发生变化,也就是反转。

你已经为弹跳加载器的第一个圆点定义了这些属性。为了瞄准第二个(2)和第三个(3)圆点,你使用了第n个子(n)选择器,它允许你选择和瞄准一个或多个元素,它们是父元素的第n个子元素。此外,对于其余的span元素,您刚刚定义了动画延迟,因此每个元素不会同时开始动画,而是延迟了定义时间后才开始,结果就是破浪形状。

标签: #css和css3 #css左右动画效果一样吗 #css动画持续时间多长 #css动画持续时间多长合适 #css动画持续时间多长合适啊知乎