前言:
今天咱们对“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动画持续时间多长合适啊知乎