Dans l'article précédent "Utilisez CSS pour créer des effets spéciaux intéressants d'animation de swing de texte", nous avons présenté la méthode d'utilisation de CSS pour créer des effets spéciaux intéressants d'animation de swing de texte. Cette fois, nous allons vous présenter comment dessiner dynamiquement un éléphant en utilisant HTML5+CSS3. Si vous êtes intéressé, vous pouvez en apprendre davantage ~
Le contenu principal de l'article d'aujourd'hui est le suivant : utilisez HTML5 svg pour dessiner une ligne d'éléphant, puis. ajoutez-le Effet d'animation, afin qu'il puisse être dessiné lentement. En disant simplement que vous ne comprenez peut-être pas quel est l'effet, jetons un coup d'œil directement au rendu :
Étudions comment obtenir cet effet :
Définissez d'abord la couleur de fond et la couleur de ligne de toute la page, la taille de la toile svg
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #000000;
color: #fff
}
svg {
display: block;
width: 90vmin;
height: 90vmin;
}Copier après la connexion
Ensuite, utilisez svg pour tracer une ligne d'éléphant
<svg role="img" aria-label="A stroke illustration of an elephant" viewBox="0 0 120 120">
<g fill="none" stroke="currentColor" line-join="round" stroke-width="1">
<path class="stroke" d="M2 66
q0 -3 3 -3 q3 0 3 3
q0 15 10 15 q10 0 10 -20 q0 -50 30 -40
s 15 -20 30 0 s -10 50 -20 35 m24 -25
q 20 0 20 30 q0 10 -10 20
l 0 15 q 0 3 -6 3 q -6 0 -6 -3l0 -15
q 0 -3 -2 -5 m 2 5
s -10 3 -20 0
l 0 15 q 0 3 -6 3 q -6 0 -6 -3l0 -15
q 0 -5 -4 -10 m 4 23
h-3 q -6 0 -6 -3
l0 -12
q 0 -5 -6 -12
m 2 -5
l 3 1 m -3 -1
l -3 -2 m 3 2
q -10 30 -27 30
q -16 0 -16 -26
m 80.5 16.5
v11 q0 3 6 3 h1.5
m-40 -50
a 3 3 0 0 1 6 0 a 3 3 0 0 1 -6 0
m 11 -17
q 15 -15 23 5
m 27.8 20
q 0 5 5 10
h2 m-2 0 v2
">
</g>
</svg>
Copier après la connexion
Enfin, obtenez l'effet d'animation :
Utilisez d'abord l'attribut Stroke-dasharray pour contrôler les points et les tirets utilisé pour dessiner le motif de motif de ligne de bordure, Stroke-dashoffset contrôle la distance entre le motif de tiret et le début du chemin. Les valeurs de ces deux propriétés doivent être cohérentes.
.stroke {
stroke-dasharray: 300;
stroke-dashoffset: 300;
}Copier après la connexion
Après avoir défini ces deux propriétés, le motif d'éléphant de ligne sera masqué, puis liera une animation à l'élément .Stroke Element .stroke元素绑定一个动画
.stroke {
animation: stroke-anim 4s linear forwards;
}Copier après la connexion
使用@keyframes规则，给动画设置动作，将stroke-dashoffsets属性的值设置为0即可
@keyframes stroke-anim {
to {
stroke-dashoffset: 0;
}
}Copier après la connexion
ok！下面给出完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #000000;
color: #fff
}
svg {
display: block;
width: 90vmin;
height: 90vmin;
}
.stroke {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: stroke-anim 4s linear forwards;
}
@keyframes stroke-anim {
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg role="img" aria-label="A stroke illustration of an elephant" viewBox="0 0 120 120">
<g fill="none" stroke="currentColor" line-join="round" stroke-width="1">
<path class="stroke" d="M2 66
q0 -3 3 -3 q3 0 3 3
q0 15 10 15 q10 0 10 -20 q0 -50 30 -40
s 15 -20 30 0 s -10 50 -20 35 m24 -25
q 20 0 20 30 q0 10 -10 20
l 0 15 q 0 3 -6 3 q -6 0 -6 -3l0 -15
q 0 -3 -2 -5 m 2 5
s -10 3 -20 0
l 0 15 q 0 3 -6 3 q -6 0 -6 -3l0 -15
q 0 -5 -4 -10 m 4 23
h-3 q -6 0 -6 -3
l0 -12
q 0 -5 -6 -12
m 2 -5
l 3 1 m -3 -1
l -3 -2 m 3 2
q -10 30 -27 30
q -16 0 -16 -26
m 80.5 16.5
v11 q0 3 6 3 h1.5
m-40 -50
a 3 3 0 0 1 6 0 a 3 3 0 0 1 -6 0
m 11 -17
q 15 -15 23 5
m 27.8 20
q 0 5 5 10
h2 m-2 0 v2
">
</g>
</svg>
</body>
</html>Copier après la connexion
大家可以直接复制以上代码，在本地进行运行演示。
这里给大家介绍几个关键的标签和属性：
HTML5 <SVG>标签用于绘制图像
<g> 用于把相关元素进行组合的容器元素，
<path> ：定义一个路径
animation 属性是一个简写属性：
animation-name：规定需要绑定到选择器的 keyframe 名称。。
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function：规定动画的速度曲线。
animation-delay：规定在动画开始之前的延迟。
animation-iteration-count：规定动画应该播放的次数。
animation-direction：规定是否应该轮流反向播放动画。
Copier après la connexion
通过 @keyframes 规则，能够创建动画。
/* 定义动画*/
@keyframes 动画名称{
/* 样式规则*/
}
/* 将它应用于元素 */
.element {
animation-name: 动画名称（在@keyframes中已经声明好的）;
/* 或使用动画简写属性*/
animation: 动画名称 1s ...
}Copier après la connexion
stroke-dasharray属性可控制用来描边的点划线的图案范式。作为一个外观属性，它也可以直接用作一个CSS样式表内部的属性。
stroke-dashoffset
rrreee
Utilisez la règle @keyframes pour définir l'action du animation. Définissez simplement la valeur de l'attribut Stroke-dashoffsets sur 0rrreee
ok ! Le code complet est donné ci-dessous : 🎜rrreee🎜Vous pouvez directement copier le code ci-dessus et exécuter la démonstration localement. 🎜🎜Voici quelques balises et attributs clés : 🎜🎜La balise HTML5
<svg></svg> est utilisée pour dessiner des images 🎜🎜
<g> est utilisée pour dessiner l'élément conteneur associé pour combiner des éléments, 🎜🎜
🎜🎜
<path> : Définir un chemin 🎜🎜
🎜🎜L'attribut
animation est un attribut abrégé : 🎜rrreee🎜Grâce à la règle
@keyframes, vous pouvez créer animations. 🎜rrreee🎜L'attribut
Stroke-dasharray contrôle le motif des lignes pointillées utilisées pour les traits. En tant que propriété d’apparence, elle peut également être utilisée directement comme propriété dans une feuille de style CSS. 🎜🎜
Stroke-dashoffset L'attribut spécifie la distance entre le mode tiret et le début du chemin. Si une valeur
La valeur peut être négative. 🎜🎜La plate-forme de site Web chinois PHP propose de nombreuses ressources pédagogiques vidéo. Bienvenue à tous pour apprendre le "🎜Tutoriel vidéo CSS🎜" et le "🎜Tutoriel vidéo HTML🎜" ! 🎜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)
