Récemment, j'étudie la série de cours <a href="http://www.php.cn/wiki/1118.html" target="_blank">HTML5</a>, qui couvrent beaucoup de contenu, bien que le contenu soit très simple et facile à comprendre, il est très difficile à retenir, comme certains des attributs CSS3. de . L'CSS3 Loading animation que je vais vous présenter aujourd'hui est également le contenu introduit dans la Geek Academy. Les étudiants intéressés peuvent également aller regarder la vidéo.
demo01.gif
Le premier effet d'animation de chargement est comme cette image. En nous retournant, prenons. un coup d'oeil au code.
Tout d'abord, définissons le code HTML Pour plus de commodité, je colle uniquement le code principal ici
<p class="box">
<p class="loading">
<i></i>
</p>
</p>p Ci-dessous, nous utilisons la balise i. demandez pourquoi, vous pouvez également le remplacer par la balise p ou toute autre balise. Utilisons CSS pour modifier notre Html
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
width: 100%;
padding: 3%;
}
.loading {
display: flex;
width: 30%;
height: 250px;
margin: 50px auto;
border: 1px solid #699;
justify-content: center;
align-items: center;
} Laissez-moi vous expliquer ici, dans cette ligne de margin: 50px auto;, définissez les marges supérieure et inférieure sur 50px, gauche et droite Réglez sur auto pour centrer notre élément horizontalement.
Et que signifie box-sizing: border-boxici ? On fixe la largeur au 30% de l'élément parent, et on fixe une bordure. La taille occupée par cette bordure compte-t-elle dans la largeur de l'élément courant ? La valeur que nous définissons ici est la description Plus la taille occupée par la bordure, l'élément actuel occupe 30 % de l'élément parent.
display,align-items,justify-content Ces trois attributs servent à placer le contenu dans la balise i au milieu de p. Utilisez d'abord l'attribut display pour définir p comme élément de boîte flexible, puis utilisez align-items pour définir l'élément pour qu'il soit centré sur l'axe vertical, et justify-content pour définir l'élément pour qu'il soit centré sur l'axe horizontal . A noter que l'effet de centrage doit être efficace lorsque ces trois éléments existent en même temps, car ces deux derniers attributs dépendent du premier attribut.
.loading i {
width: 35px;
height: 35px;
position: relative;
display: block;
border-radius: 50%;
background: linear-gradient(transparent 0%, transparent 50%,
#699 50%, #699 100%);
-webkit-animation: loading 1s linear 0s infinite;
}Regardez l'attribut background, qui définit un effet de dégradé linéaire. Les paramètres sont également quelque chose que je ne comprends pas quand je suis nouveau dans ce domaine, je ne comprends pas pourquoi c'est écrit. comme ça. En fait, cela peut être compris de cette façon. De 0% à 70% est défini sur transparent, de 70% à 100% est défini sur #699, afin que nous puissions voir l'image dans le ci-dessus photo. L'attribut
-webkit-animation spécifie une animation pour l'élément actuel. Le premier paramètre est le nom de l'animation, qui est loading. Cette animation doit être définie par nous-mêmes. ci-dessous. Le deuxième paramètre est la durée de l'animation, le troisième paramètre est la courbe de vitesse de l'animation, le quatrième paramètre est le temps de retard de l'animation et le cinquième paramètre est le nombre de fois que l'animation est jouée. Jetons un coup d'œil à notre propre animation définie
@-webkit-keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} qui est très facile à comprendre, c'est-à-dire la rotation d'éléments à différentes étapes de l'animation. Il est à noter que cette méthode de définition ne peut voir l'effet d'animation que dans les navigateurs Chrome et Safari, donc si nous voulons également afficher l'effet d'animation dans le navigateur Firefox, alors nous devons le définir comme ceci. Lorsque
@-moz-keyframes loading-moz{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} fait référence à , -moz-animation: loading-moz 1s linear 0s infinite; est presque pareil, il suffit de changer l'en-tête (pour ce qui est de le définir dans d'autres navigateurs, essayez-le vous-même).
demo02.gif
L'effet de cette animation est que les cinq bandes se balancent comme des vagues. Écrivons un tel effet ci-dessous. Le premier est HTML, sans aucun doute, disposition très simple
<p class="box">
<p class="loading">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</p>
</p> En fait, presque tous les CSS codes pour cet effet sont cohérents avec ce qui précède, jetons un coup d'œil
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
width: 100%;
padding: 3%;
}
.loading {
display: flex;
width: 30%;
height: 250px;
margin: 50px auto;
border: 1px solid #699;
justify-content: center;
align-items: center;
}
.loading i {
position: relative;
width: 6px;
height: 32px;
margin-right: 6px;
border-radius: 3px;
background-color: #699;
}La seule ligne de code supplémentaire ici est l'attribut .loader i dans margin-right. Pourquoi y a-t-il une telle ligne supplémentaire ? Parce que nous avons 5 balises i, s'il n'y a pas de paramètre d'attribut dans cette ligne, toutes les balises se chevaucheront. L'étape suivante consiste à définir l'effet d'animation.
@-webkit-keyframes loading {
0% {
transform: scaleY(1);
}
50% {
transform: scaleY(.5);
}
100% {
transform: scaleY(1);
}
}
.loading i:first-child {
-webkit-animation: loading 1s linear .1s infinite;
}
.loading i:nth-child(2) {
-webkit-animation: loading 1s linear .2s infinite;
}
.loading i:nth-child(3) {
-webkit-animation: loading 1s linear .3s infinite;
}
.loading i:nth-child(4) {
-webkit-animation: loading 1s linear .4s infinite;
}
.loading i:last-child {
-webkit-animation: loading 1s linear .5s infinite;
}可见我们设置的动画效果就是在 50% 的时候，将元素沿着 Y 轴进行缩放。然后我们对每一个i 标签进行了动画设定，不同的是每一个标签中的动画延迟执行时间不同，这样就可以达到波浪的效果，还有一点值得注意的是，我们发现我们指定的 动画速度曲线不同了，其实这个地方我们有必要了解一下所有可能的取值，如下
linear 动画从头到尾的速度是相同的。 ease 默认。动画以低速开始，然后加快，在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。
demo03.gif
这次要做的效果是动态转圈加载的效果，下面来看看如何实现这里的 HTML 代码和以上两个可能有点差别，这里多了一个 p 标签，目的是让画出的图形能够居中。
<p class="box">
<p class="loader">
<p class="loading">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</p>
</p>
</p>看看 CSS 代码
.box {
width: 100%;
padding: 3%;
}
.loader {
width: 30%;
height: 250px;
margin: 10px auto;
border: 1px solid chocolate;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.loading {
position: relative;
}
.loading i {
display: block;
width: 15px;
height: 15px;
background-color: #333333;
border-radius: 50%;
position: absolute;
}要理解为什么这些代码会画出如图所示的图形，那么我们必须要对 position 属性有一个透彻的了解，首先我们来看看我们用到的两个属性值是什么意思.
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
知道了意思，再来分析以上的代码，我们在loading 元素中定义了一个 position:relative 由于没有相应的内容将其撑起，所以这个时候loading 实际上为中心的一个点，然后我们将 i 标签设置为绝对定位，也就是围绕着这个点进行画圆即可。下面来看看画圆的代码
.loading i:nth-child(1) {
top: 25px;
left: 0px;
}
.loading i:nth-child(2) {
top: 17px;
left: 17px;
}
.loading i:nth-child(3) {
top: 0px;
left: 25px;
}
.loading i:nth-child(4) {
top: -17px;
left: 17px;
}
.loading i:nth-child(5) {
top: -25px;
left: 0px;
}
.loading i:nth-child(6) {
top: -17px;
left: -17px;
}
.loading i:nth-child(7) {
top: 0px;
left: -25px;
}
.loading i:nth-child(8) {
top: 17px;
left: -17px;
}看到这些代码，如果你不知道为什么这样能够画出一个圆，那么拿出草稿纸，画一个坐标轴，将上述代码中的 top 值作为 y 轴的值，将 left 的值作为 x 轴的值，就可以看到为什么这么书写代码了。好了，静态图像已经书写完毕，那么接下来就是定义动画的时间了
@-webkit-keyframes loading {
50%{
transform: scale(0.4);
opacity: 0.3;
}
100%{
transform: scale(1);
opacity: 1;
}
}opacity 属性用于设置元素的透明度。所以说我们的动画效果就是将元素缩小为 0.4 倍并且将透明度设置成 0.3。然后为每个 i 标签指定动画效果，从上到下依次为
-webkit-animation: loading 1s ease 0s infinite; -webkit-animation: loading 1s ease 0.12s infinite; -webkit-animation: loading 1s ease 0.24s infinite; -webkit-animation: loading 1s ease 0.36s infinite; -webkit-animation: loading 1s ease 0.48s infinite; -webkit-animation: loading 1s ease 0.60s infinite; -webkit-animation: loading 1s ease 0.72s infinite; -webkit-animation: loading 1s ease 0.84s infinite;
这个时候如果运行，你会发现好像是逆时针旋转的，如果想改成顺时针旋转，可以将延迟时间前面都加上负号。好了，今天先介绍这三种加载效果，如果书写有错误，欢迎反馈交流。
【相关推荐】
1. 免费css在线视频教程
2. css在线手册
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
