Web前端之实现一只可爱的小杰尼乌龟、伪元素、动画
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;
}
. {
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;
}
. {
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);
}
}