Créez une jolie expression de grenouille en utilisant HTML
Expérimentez d'abord toutes les émoticônes :
Avant de commencer, faisons un point de connaissance : Disposition élastique flexible
Nous utilisons généralement la méthode float pour créer des dispositions horizontales à trois colonnes et afficher chaque bloc flottant sur la même ligne. Cette méthode aura pour conséquence que l'élément n'aura pas l'attribut de hauteur d'origine, et la suppression du flotteur sera utilisée pour résoudre le problème d'occupation de l'espace. C'est très gênant pour ces dispositions spéciales. Par exemple, le centrage vertical n'est pas facile à réaliser.
En 2009, le W3C a proposé une nouvelle solution : la mise en page Flex, qui peut réaliser diverses mises en page de manière simple, complète et réactive. Actuellement, il est pris en charge par presque tous les navigateurs, ce qui signifie que vous pouvez désormais utiliser cette fonctionnalité en toute sécurité. Consultez le blog pour la grammaire de base : Tutoriel Flex Layout : Grammaire
De plus, vous devez avoir une certaine compréhension des pseudo-éléments en CSS : avant, après
Enfin, si vous souhaitez que l'expression bouge, le plus important est d'utiliser l'attribut animation.
Disposition générale
-
Nous disposons d'abord le siège global de manière à ce que chaque expression puisse être affichée intuitivement dans chaque position, car chacune Les émoticônes presque occupent un espace carré, nous affichons donc chaque émoticône de grenouille horizontalement sur la page, en utilisant la disposition flexible ici.
<div class="container"><!--所有表情的存放容器，flex布局，所有子项目水平显示，自动换行，水平居中显示，竖直方向从顶部开始--><div class="emoji-container"> <!--存放青蛙表情的大容器，控制大小间距之类的属性--><div class="icon"> <!--存放每一个青蛙表情的容器，控制每一个表情自己的位置和特征--><div class="frog" id="frog-n"></div></div></div></div> body {background-color: #F1FFE6;} .container {width: 950px;margin: 70px auto 0px auto;text-align: center;} .container .emoji-container { /*flex弹性布局，多用于左右并排布局，跟float的作用类似，不用清除浮动*/ display: -webkit-box; display: -ms-flexbox; display: flex; /*justify-content属性定义了项目在主轴上的对齐方式。center就是在x轴上居中显示*/ -ms-grid-column-align: center; justify-items: center; /*align-items属性定义项目在交叉轴上如何对齐。flex-start就是从y轴的最上端开始排列*/ -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; /*flex-wrap属性定义，如果一条轴线排不下，如何换行。wrap：换行，第一行在上方。*/ -ms-flex-wrap: wrap; flex-wrap: wrap; } .container .emoji-container .icon { margin-right: 40px; margin-bottom: 40px; } .container .emoji-container .icon:nth-child(6n) { margin-right: 0px; } .icon {width: 125px;height: 120px;position: relative;} .icon .frog {position: absolute; top: 0;left: 0;width: 100%;height: 100%;}Copier après la connexion
Styles généraux de grenouilles
Observez chaque expression de grenouille Bien que chaque expression ait des formes différentes, elles sont la position et la taille. du corps, de la bouche, des yeux et du petit rougissement sont presque les mêmes. Nous pouvons écrire ces styles cohérents comme styles communs, puis écrire un style unique pour les caractéristiques de chaque grenouille en fonction de l'identifiant de grenouille de chaque personne pour le redessiner ou la couverture.
<div class="frog" id="frog-1"> <!-- 蛙蛙的身体部分 --> <div class="body"> <!-- 蛙蛙的嘴巴 --> <div class="mouth"></div> </div> <!-- 蛙蛙的眼睛 --> <div class="eyes"> <!-- 蛙蛙的左右眼睛 --> <div class="eye eye-left"> <!-- 蛙蛙的内眼圈儿 --> <div class="eye-inner"> <!-- 蛙蛙的眼珠 --> <div class="pupil"> <!-- 蛙蛙眼圈里的光晕 --> <div class="light"></div> </div> </div> </div> <div class="eye eye-right"> <div class="eye-inner"> <div class="pupil"> <div class="light"></div> </div> </div> </div> </div> </div>/*蛙蛙身体部分样式*/.icon .frog .body {width: 110px;height: 86px;background-color: #A3D768; border-radius: 50%;position: absolute;top: 25px;left: 0;right: 0;margin: auto;box-shadow: 4px 4px 0px 0px rgba(163, 215, 104, 0.3); }/*蛙蛙嘴巴部分样式，因为每个蛙蛙的嘴巴不一样，所以公共样式就只定义了位置*/.icon .frog .body .mouth {margin: auto;}.icon .frog .eyes {width: 86px;height: 35px;position: absolute; top: 8px;left: 0;right: 0;margin: auto; }/*蛙蛙眼睛部分样式*/.icon .frog .eyes .eye {width: 35px;height: 35px;}.icon .frog .eyes .eye:before {content: "";display: block;width: 100%;height: 100%; background-color: #A3D768;border-radius: 50%; }/*蛙蛙眼圈部分样式*/.icon .frog .eyes .eye .eye-inner {background-color: #fff;width: 80%;height: 80%; position: absolute;top: 10%;left: 10%;border-radius: 50%; }/*蛙蛙眼珠部分样式*/.icon .frog .eyes .eye .eye-inner .pupil {background-color: #3F6A34; width: 60%;height: 60%;position: absolute;top: 20%;left: 20%;border-radius: 50%; }/*蛙蛙眼珠里的亮光部分样式*/.icon .frog .eyes .eye .eye-inner .pupil .light {background-color: #fff; width: 50%;height: 50%;position: absolute;top: 10%;left: 10%;border-radius: 50%; }/*蛙蛙左右两边眼睛的位置*/.icon .frog .eyes .eye-left {position: absolute;top: 0px;left: 0;}.icon .frog .eyes .eye-right {position: absolute;top: 0px;right: 0;}Copier après la connexion
Frog basic public style.png
La première petite grenouille
La première petite grenouille
La première petite grenouille a un effet dynamique avec les coins de sa bouche relevés en fonction du style de base, donc pour compléter le dessin de la première grenouille, il suffit d'ajouter le animation de la bouche basée sur le style commun, et la structure dom est la même.
.frog#frog-1 .body .mouth {width: 18px;height: 22px;border-bottom: 3px solid #3F6A34;position: absolute;top: 6px;left: 0;right: 0;-webkit-animation: smile 3.8s linear 0s infinite;animation: smile 3.8s linear 0s infinite; } @-webkit-keyframes smile { 0% { border-radius: 0%; } 20% { border-radius: 50%; } 70% { border-radius: 50%; } } @keyframes smile { 0% { border-radius: 0%; } 20% { border-radius: 50%; } 70% { border-radius: 50%; } }Copier après la connexionLa première grenouille animation.gif
La deuxième petite grenouille
La bouche de la deuxième petite grenouille est une grande bouche, et il y a deux petits rougissements sur les joues. Les yeux sont remplis d'amour, donc le rougissement doit être ajouté à la structure du dom. les styles de la bouche et des yeux doivent également être modifiés en conséquence. (Faire principalement la bouche, le rougissement et le coeur rouge)
<div class="frog" id="frog-2"> <div class="body"> <!--存放蛙蛙的脸颊红晕--> <div class="blush"></div> <!--加上大嘴巴的class big-month--> <div class="mouth big-mouth"></div> </div> <div class="eyes"> <div class="eye eye-left"> <div class="eye-inner"> <div class="pupil"> <div class="light"></div> </div> </div> </div> <div class="eye eye-right"> <div class="eye-inner"> <div class="pupil"> <div class="light"></div> </div> </div> </div> </div> </div>/*第二只青蛙脸颊两边的红晕样式*/.icon .frog .body .blush {width: 75px;height: 9px;position: absolute;top: 20px;left: 0;right: 0;margin: auto; }.icon .frog .body .blush:before, .icon .frog .body .blush:after {content: "";display: block;width: 12px;height: 100%;background-color: #F7D2C9;border-radius: 50%; }.icon .frog .body .blush:before {position: absolute;top: 0;left: 0;}.icon .frog .body .blush:after {position: absolute;top: 0;right: 0;}/*第二只青蛙的嘴巴样式，用圆角和阴影的方式制作而成*/.icon .frog .body .big-mouth {width: 30px;height: 20px;border-radius: 0 0 50% 50%;box-shadow: 2px 2px 0px 0px rgba(63, 106, 52, 0.3); } .frog#frog-2 .mouth {background-color: #fff;position: absolute;top: 30px;left: 0;right: 0; }/*第二只青蛙的眼睛样式，将眼圈的背景设置为透明色，圆圈里面的亮光隐藏*/ .frog#frog-2 .eye-inner {top: 17%;background-color: transparent !important; -webkit-animation: hearts 0.6s linear 0s infinite alternate;animation: hearts 0.6s linear 0s infinite alternate; } @-webkit-keyframes hearts {0% { -webkit-transform: scale(0.7); transform: scale(0.7); }100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes hearts {0% { -webkit-transform: scale(0.7); transform: scale(0.7); }100% { -webkit-transform: scale(1); transform: scale(1); } }/*第二只青蛙的眼睛的爱心样式，左上角和右上角设置交圆角50%，然后左右对应的旋转45度合并成一个爱心的形状*/ .frog#frog-2 .eye-inner:before, .frog#frog-2 .eye-inner:after {content: "";display: block; height: 70%;width: 40%;background-color: #C71F1C;border-radius: 50% 50% 0 0; } .frog#frog-2 .eye-inner:before {position: absolute;top: 0;left: 5px; -webkit-transform: rotate(-45deg);transform: rotate(-45deg); } .frog#frog-2 .eye-inner:after {position: absolute;top: 0;right: 5px; -webkit-transform: rotate(45deg);transform: rotate(45deg); } .frog#frog-2 .eye-inner .pupil {display: none;}Copier après la connexion
La troisième petite grenouille
Les changements de la troisième petite grenouille par rapport au style du public sont les changements des yeux et de la bouche, donc le plus important est de dessiner le style de l'œil gauche et le style de la bouche.
La langue est transformée en ellipse, tournée à l'angle correspondant et pressée, puis une partie de celle-ci est recouverte par la bouche
<. 🎜>
La langue de la troisième grenouille est décomposée.png
<div class="frog" id="frog-3">
<div class="body">
<div class="mouth">
<!--存放舌头样式的容器-->
<div class="toungue"></div>
</div>
</div>
<div class="eyes">
<!--左眼添加wink的样式，作为左眼眯眼样式-->
<div class="eye eye-left wink">
<div class="eye-inner">
<div class="pupil">
<div class="light"></div>
</div>
</div>
</div>
<div class="eye eye-right">
<div class="eye-inner">
<div class="pupil">
<div class="light"></div>
</div>
</div>
</div>
</div>
</div>/*第三只小青蛙的左眼眯眼样式*/.icon .frog .eyes .eye.wink .eye-inner { background-color: transparent; width: 17px; height: 3px; background-color: #3F6A34; border-radius: 0; position: absolute; top: 15px; left: 0; right: 0; margin: auto;
-webkit-transform: rotate(21deg); transform: rotate(21deg);
}.icon .frog .eyes .eye.wink .eye-inner:before, .icon .frog .eyes .eye.wink .eye-inner:after { content: ''; display: block; width: 17px; height: 3px; background-color: #3F6A34;
}.icon .frog .eyes .eye.wink .eye-inner:before {
-webkit-transform: rotate(25deg); transform: rotate(25deg); position: absolute; top: -4px; left: 0;
}.icon .frog .eyes .eye.wink .eye-inner:after {
-webkit-transform: rotate(-25deg); transform: rotate(-25deg); position: absolute; top: 4px; left: 0;
}.icon .frog .eyes .eye.wink .pupil { display: none;
}/*第三只小青蛙的右眼亮光位置*/
.frog#frog-3 .eye-right .light { position: absolute; top: 10%; left: auto; right: 10%;
}/*第三只小青蛙的嘴巴吐舌头样式*/
.frog#frog-3 .mouth { width: 25px; height: 25px; position: absolute; top: 5px; left: 0; right: 0;
-webkit-transform: rotate(23deg); transform: rotate(23deg);
}
.frog#frog-3 .mouth:before { content: ""; display: block; border-bottom: 3px solid #3F6A34; width: 100%; height: 100%; border-radius: 50%; background-color: #A3D768; z-index: 3; position: absolute; top: 0px; left: 0;
}
.frog#frog-3 .toungue { width: 16px; height: 20px; background-color: #C71F1C; border-radius: 30px; z-index: 2; position: absolute; top: 17px; left: 4px;
-webkit-transform-origin: center top; transform-origin: center top;
-webkit-animation: toungue 2.0s linear 0s infinite; animation: toungue 2.0s linear 0s infinite;
}
@-webkit-keyframes toungue { 0% {
-webkit-transform: scale(1, 1);transform: scale(1, 1);
} 40% {
-webkit-transform: scale(1, 1);transform: scale(1, 1);
} 75% {
-webkit-transform: scale(1, 0);transform: scale(1, 0);
}
}
@keyframes toungue { 0% {
-webkit-transform: scale(1, 1);transform: scale(1, 1);
} 40% {
-webkit-transform: scale(1, 1);transform: scale(1, 1);
} 75% {
-webkit-transform: scale(1, 0);transform: scale(1, 0);
}
}
.frog#frog-3 .toungue:before { content: ""; display: block; width: 2px; height: 4px; background-color: #410a09; position: absolute; left: 0px; right: 0px; bottom: 5px; margin: auto;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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.
Déplacer du texte en HTML
Sep 04, 2024 pm 04:45 PM
Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.
Bouton HTML onclick
Sep 04, 2024 pm 04:49 PM
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
