Comment dessiner une animation de lion en utilisant CSS ? L'article suivant vous guidera étape par étape pour dessiner une jolie animation de lion de dessin animé en utilisant CSS. J'espère que cela vous sera utile.
Dans ce numéro, nous allons utiliser du CSS pur pour dessiner un lion de dessin animé mignon et mignon Grâce à cette châtaigne, nous pourrons nous familiariser avec davantage de techniques de dessin CSS, et je pense que nous serons plus à l'aise dans la future interface. tâches de dessin. [Apprentissage recommandé : Tutoriel vidéo CSS]
Dessin de base
Nous venons d'abord à Kangkang Quelles parties est-ce qu'un lion se compose de :
D'après la vue ci-dessus, ce lion est composé de oreilles+yeux+nez+moustaches+bouche+crinière+pattes avant+pattes+queue . Je pense qu'il n'est pas difficile pour tout le monde de voir que de nombreuses pièces peuvent être complétées en créant simplement des rectangles et des coins arrondis. Par exemple, les yeux sont formés en empilant deux cercles. Vous pouvez voir la démonstration de code ci-dessus pour plus de détails. Je n'entrerai pas dans les détails de ces graphiques de base ici. 耳朵+眼睛+鼻子+胡须+嘴巴+鬃毛+前腿+爪子+尾巴 这些部分组成。相信大家不难看出很多部位可以通过非常简单做矩形和圆角句可以完成他们。比如眼睛，就是两个圆形堆叠而成，具体可以看上面的代码演示，这里对于这些基础图形就不做过多讲述了。
接下来，我们就具体说说，一些不好绘制的图形吧。
耳朵
可以看到它似半圆形，像是花瓣一样，常规方法来做的话肯定是不好实现的， 但可以通过 clip-path 属性，它是使用裁剪方式创建元素的可显示区域，其区域内的部分显示，区域外的隐藏。而绘制耳朵，我们就利用这区域裁剪，其 ellipse 椭圆裁切的方法，其 两个传入至分别表示其裁切的半径，而at后的两个值则代表裁切的x与y轴的坐标。
.ear {
width: 70px;
height: 70px;
position: absolute;
top: 10px;
background-color: var(--skin-color);
z-index: 9;
border-radius: 40px;
clip-path: ellipse(100% 100% at -20% -10%);
}
同理，那个类似于半圆的身体也是通过 clip-path: ellipse 来实现的，当然不止于此他可以裁剪出任何图形来，可以说非常的强大了。
鼻子
鼻子是一个三角形而构成，css绘制三角形也是一个小技巧，就是把 width 与 height 设为 0，单纯使用 border 属性来完成，设置 border-width 使其代替块的宽高，但其块的内部是由四个小三角形拼成的矩形了，然后因为排布是上右下左的顺序，所以只要给其中一个角的颜色赋值即可实现一个三角形。
.nose {
width: 0px;
height: 0px;
border-width: 20px 30px;
border-style: solid;
border-color: var(--eye-color) transparent transparent transparent;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: 40px;
z-index: 3;
}
尾巴
尾部主要也是利用 border 来实现，画一个矩形div块，让他旋转一定角度，然后只绘制其中一个边框，然后再使用 border-radius: 40% 50% , 给它弯曲的一种感觉就大功告成了。
.tail {
width: 320px;
height: 320px;
position: absolute;
top: -137px;
border-style: solid;
border-width: 30px;
border-radius: 40% 50%;
border-color: transparent var(--tail-color) transparent transparent;
transform: rotate(125deg);
left: -180px;
}
动画制作
摇尾巴
尾部的力量都源于尾巴根，所以要从根部进行一个轻微摇摆的旋转动画，所以，我们就利用到了 transform-origin 属性，它可以让你更改一个元素变形的原点，如，根部发力那么就直接设置成 transform-origin: 50% 100% 也可以写成 transform-origin: center bottom 。
第一个参数代表了定义变形中心距离盒模型的左侧的偏移值。
| keyword | value |
|---|---|
left | 0% |
center | 50% |
right | 100% |
第二个参数代表了定义变形中心距离盒模型的顶的偏移值。
| keyword | value |
|---|---|
top | 0% |
center | 50% |
bottom | 100% | Ensuite, parlons de quelques graphiques difficiles à dessiner en détail.
clip-path, qui consiste à utiliser le recadrage pour créer une zone affichable de l'élément, avec des parties dans la zone affichée et des parties en dehors de la zone masquées. Pour dessiner les oreilles, nous utilisons cette zone pour recadrer. Dans la méthode de découpe d'ellipse ellipse, les deux transmis représentent le rayon de coupe, et les deux valeurs après représentent le rayon de coupe. Les coordonnées des axes x et y de la tangente. 🎜.tail {
// ...
animation: 1s wagging ease-in-out infinite alternate forwards;
transform-origin: 50% 100%;
}
@keyframes wagging {
0% {
transform: rotate(125deg) translateX(0) translateY(0px);
}
100% {
transform: rotate(130deg) translateX(15px) translateY(-15px);
}
}🎜🎜 De la même manière, le corps semblable à un demi-cercle est également réalisé via clip-path: ellipse. Bien sûr, plus que cela, il peut découper n'importe quel graphique, ce qui peut être considéré comme très puissant. . 🎜🎜🎜Le nez🎜🎜🎜Le nez est constitué d'un triangle. Dessiner des triangles avec CSS est aussi une petite astuce, qui consiste à définir la largeur et la hauteur à 0. et utilisez simplement l'attribut border pour compléter, définissez border-width pour remplacer la largeur et la hauteur du bloc, mais l'intérieur du bloc est un rectangle composé de quatre petits triangles , et puis parce que la disposition est dans l'ordre haut à droite, bas à gauche, il suffit donc d'attribuer une couleur à l'un des coins pour réaliser un triangle. 🎜.eye {
// ...
animation: 4s blinking infinite forwards;
overflow: hidden;
}
@keyframes blinking {
0%,
40%,
80% {
clip-path: ellipse(100% 100% at 50% 48%);
}
60%,
100% {
clip-path: ellipse(100% 2% at 50% 48%);
}
}🎜🎜 🎜Tail🎜🎜🎜La queue est principalement implémentée à l'aide de border. Dessinez un bloc div rectangulaire, faites-le pivoter selon un certain angle, puis dessinez une seule des bordures, puis utilisez border-. rayon : 40 % 50%, donnez-lui une sensation de courbure et le tour est joué. 🎜rrreee🎜🎜🎜 🎜🎜Production d'animation🎜🎜🎜🎜🎜Remuer la queue🎜🎜🎜La puissance de la queue vient de la racine de la queue, nous devons donc effectuer une légère animation de rotation de balancement à partir de la racine, nous avons donc utilisé transform- origin</code >, qui vous permet de changer l'origine de la transformation d'un élément. Par exemple, si la racine exerce une force, elle peut être directement définie sur <code>transform-origin: 50% 100% ou. il peut s'écrire sous la forme transform-origin: center bottom. 🎜🎜Le premier paramètre représente la valeur de décalage qui définit le centre de déformation par rapport au côté gauche du modèle de boîte. 🎜| mot clé | valeur | 🎜|||||||
|---|---|---|---|---|---|---|---|---|
gauche< /code>🎜<td><code>0%🎜🎜 | ||||||||
centre🎜 | 50%🎜🎜 | |||||||
right🎜 | 100%🎜🎜🎜🎜🎜Le deuxième paramètre représente la valeur de décalage qui définit le centre de déformation par rapport au haut du modèle de boîte. 🎜
|
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
