web前端之实现一只可爱的小杰尼乌龟、伪元素、动画

---

前言

代码段使用HTML和CSS创建一个“杰尼龟”的动画。

---

效果图

---

---

html

<div class="squirtle"><div class="tail"></div><div class="body"><div class="stomach"></div><div class="shell"></div></div><div class="head"><div class="eye"></div><div class="eye"></div><div class="mouth"></div></div><div class="leg back"></div><div class="leg"></div><div class="arm back"></div><div class="arm"></div>
</div>

HTML定义“杰尼龟”的结构，包括尾巴、身体、头部、眼睛、嘴巴、四肢等。

---

style

html {box-sizing: border-box;
}*,
*::before,
*::after {box-sizing: inherit;
}body {width: 100vw;height: 100vh;margin: 0;padding: 0;box-sizing: border-box;font-size: 100%;.squirtle {position: absolute;width: 20em;height: 20em;top: 50%;left: 50%;margin: -10em;animation: bounce 250ms infinite linear alternate;.tail {position: absolute;width: 4.5em;height: 5.5em;top: 50%;left: 50%;margin: 0.25em 0 0 -0.5em;transform-origin: 2.5em 100%;background-color: #66bbcc;border: 0.325em solid #555555;border-radius: 50%;animation: bounce2 250ms infinite linear alternate;}.tail::before,.tail::after {content: "";position: absolute;width: 5em;height: 5.5em;top: -2em;left: 2.25em;background-color: inherit;border: 0.325em solid #555555;border-left-color: transparent;border-radius: 50%;}.tail::after {width: 2.5em;height: 2.75em;top: 0.375em;left: 2.625em;transform: translateX(1%);background-color: transparent;border: 0.325em solid #555555;border-right-color: transparent;border-bottom-color: transparent;}.body {position: absolute;width: 6em;height: 6em;top: 50%;left: 50%;margin: 4em 0 0 -1em;transform: translate(-50%, -50%);overflow: hidden;background-color: #ffee99;border: 0.375em solid #555555;border-radius: 10% 10% 50% 50% / 50%;.stomach {position: absolute;width: 115%;height: 100%;bottom: 3.25em;left: -1.125em;border: 0.25em solid transparent;border-bottom-color: #555;border-radius: 50%;box-shadow: 0 1.25em #ffee99, 0 1.5em #555555;}.stomach::before {content: "";position: absolute;width: 40%;height: 100%;bottom: -4.125em;left: 2.25em;transform: rotate(-10deg);border: 0.25em solid transparent;border-left-color: #555555;border-radius: 50%;}.shell {position: absolute;width: 100%;height: 115%;top: 0;left: 0.25em;z-index: 1;border-radius: 10% 10% 50% 50% / 50%;box-shadow: inset -0.5em 0 #995533, inset -1em 0 #aa6633, inset -1.25em 0 #555555,inset -1.75em 0 #ffffff, inset -2em 0 #555555;}}.body::before,.body::after {content: "";position: absolute;background-color: #ffee99;border: 0.25em solid #555555;border-radius: 10%;}.body::before {width: 1.25em;height: 1.5em;top: 2.25em;left: -1em;z-index: 1;transform: rotate(55deg);}.body::after {height: 1.25em;top: 4.825em;left: 1.375em;z-index: 0;transform: skewX(10deg) rotate(40deg);box-shadow: 0.375em -3.375em #ffee99, 0.125em -3.0625em #555555;}.head {position: absolute;width: 10em;height: 10em;top: 50%;left: 50%;z-index: 1;margin: -8.25em 0 0 -5.5em;background-color: #77ccdd;border: 0.325em solid #555555;border-radius: 50%;animation: bounce2 250ms infinite linear alternate;.eye {position: absolute;width: 2em;height: 2.825em;top: 5em;left: 4em;z-index: 1;overflow: hidden;background-color: #555555;border: 0.1875em solid #555555;border-radius: 50% / 60% 60% 40% 40%;box-shadow: inset 0 -0.375em #aa6633;}.eye::before {content: "";position: absolute;width: 30%;height: 30%;top: 0.375em;right: 0.25em;background-color: #ffffff;border-radius: 50%;}.eye:first-child {width: 1.5em;height: 2.25em;top: 4em;left: 0.5em;border: 0.125em solid #555555;box-shadow: inset 0 -0.25em #aa6633;}.mouth {position: absolute;width: 1.125em;height: 1.75em;z-index: 1;bottom: 0.75em;left: 2em;background-color: #ffcccc;border: 0.125em solid #555555;border-radius: 50%;box-shadow: inset 0 1.125em 0 -0.0625em #ff5555, inset 0 1.1875em #555555;}.mouth::before {content: "";position: absolute;width: 3em;height: 1em;top: -0.25em;right: -0.825em;transform: rotate(20deg);background-color: #77ccdd;border: 0.125em solid transparent;border-bottom-color: #555555;border-radius: 50%;}.mouth::after {content: "";position: absolute;width: 2em;height: 2em;top: -6.5em;right: -0.825em;transform: rotate(-20deg) scaleY(0.75);background-color: rgba(255, 255, 255, 0.25);border-radius: 50%;box-shadow: -1.5em 0.5em 0 -0.625em rgba(255, 255, 255, 0.25),-4.125em 4.5em 0 -0.625em rgba(255, 200, 200, 0.8),0.75em 10em 0 -0.5em rgba(255, 200, 200, 0.8);}}.head::before {content: "";position: absolute;width: 8.25em;height: 5em;right: 1.625em;bottom: -0.0625em;transform: rotate(10deg);background-color: inherit;border-radius: 50%;box-shadow: 0 0 0 0.325em #555555;}.head::after {content: "";position: absolute;width: 100%;height: 100%;background-color: inherit;border-radius: 50%;box-shadow: inset -0.5em 0.25em #66bbcc;}.leg {position: absolute;width: 2.5em;height: 3em;top: 50%;left: 50%;z-index: 0;margin: 5.25em 0 0 -1em;transform-origin: 50% 1em;background-color: #77ccdd;border: 0.325em solid #555555;border-radius: 50% / 50% 50% 50% 30%;animation: swing 500ms infinite linear alternate;}.leg::before {content: "";position: absolute;width: 2.25em;height: 1.5em;right: 0.325em;bottom: -0.325em;transform: rotate(15deg);background-color: inherit;border: 0.325em solid #555555;border-radius: 50% 50% 50% 50% / 80% 50% 50% 30%;}.leg::after {content: "";position: absolute;width: 100%;height: 100%;background-color: inherit;border-radius: 50% / 50% 50% 50% 30%;box-shadow: inset -0.375em 0.25em #66bbcc;}.leg.back {width: 2.25em;height: 2.75em;z-index: -1;margin: 5em 0 0 -3.75em;background-color: #66bbcc;animation-delay: -500ms;}.arm {position: absolute;width: 2em;height: 3em;top: 50%;left: 50%;z-index: 0;margin: 2.125em 0 0 -0.25em;transform-origin: 50% 1em;background-color: #77ccdd;border: 0.325em solid #555555;border-radius: 80% 80% 80% 60% / 60% 60% 60% 80%;box-shadow: inset -0.375em 0.25em #66bbcc;animation: swing 500ms -500ms infinite linear alternate;}.arm.back {z-index: -1;margin: 1.75em 0 0 -4em;background-color: #66bbcc;animation-name: swing2;animation-delay: -1000ms;}}.squirtle::after {content: "";position: absolute;width: 60%;height: 20%;bottom: 0;left: 50%;z-index: -10;margin-left: -30%;background-color: rgba(0, 0, 0, 0.05);border-radius: 50%;animation: bounce 250ms infinite linear alternate-reverse;}
}@keyframes swing {0% {transform: rotate(-60deg);}100% {transform: rotate(10deg);}
}@keyframes swing2 {0% {transform: rotate(-10deg);}100% {transform: rotate(60deg);}
}@keyframes bounce {0% {transform: translateY(0);}100% {transform: translateY(-0.25em);}
}@keyframes bounce2 {0% {transform: rotate(0);}100% {transform: rotate(2deg);}
}

---

初始化

html {box-sizing: border-box;
}*,
*::before,
*::after {box-sizing: inherit;
}body {width: 100vw;height: 100vh;margin: 0;padding: 0;box-sizing: border-box;font-size: 100%;
}

代码段设定全局样式，包括边框的计算方式(box-sizing)，以及body的宽度、高度和其他基础样式。

---

.squirtle定义杰尼龟样式
1、.squirtle是杰尼龟的容器，设置了大小、位置及“弹跳”的动画效果。

---

.tail尾巴
1、定义尾巴的形状、颜色及动画效果，尾巴的两个伪元素(::before和::after)用于创建螺旋形状。

---

.body身体
1、定义杰尼龟的身体，包括身体的基本颜色和外形。

---

.stomach胃部和.shell壳
1、stomach(胃部)和shell(壳)部分用来进一步修饰杰尼龟的外观，使用伪元素增加视觉细节。

---

.head头部
1、定义头部的形状、颜色及动画效果。

---

.eye眼睛和.mouth嘴巴
1、眼睛和嘴巴部分通过伪元素进行额外修饰，eye和mouth分别定义杰尼龟的眼睛和嘴巴的样式。

---

.leg, .arm四肢
1、定义四肢的样式，包括前后肢的位置、大小和动画效果。

---

.bounce弹跳动画
1、控制整体弹跳的动画，bounce2用于头部和尾巴的微动效果。

---

.swing摆动动画
1、四肢的摆动动画，使得杰尼龟看起来像在行走或游泳。

---

总结
代码段通过HTML和CSS构建一个卡通风格的“杰尼龟”图形，并且添加一些基础的动画效果，让“杰尼龟”看起来活灵活现。这些动画通过CSS的@keyframes规则来定义，使得角色的各个部分都能够运动起来。