<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3绘制俏皮的蓝色卡通小蚂蚁效果</title>
<style>
* {
box-sizing: border-box;
position: relative;
}
*::after,
*::before {
box-sizing: border-box;
content: "";
position: absolute;
}
body {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-image: -webkit-linear-gradient(top, #7b7eb6, #d9879d);
background-image: linear-gradient(to bottom, #7b7eb6, #d9879d);
background-size: contain;
background-repeat: no-repeat;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100vh;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0;
min-height: 500px;
min-width: 800px;
overflow: hidden;
width: 100vw;
}
.cri-kee {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
right: 4rem;
height: 37.5rem;
width: auto;
}
.cri-kee::before {
/* left antenna */
border-radius: 100%;
border-right: 0.4rem solid #282828;
height: 20rem;
right: 5rem;
top: calc(40% - 15rem);
width: 10rem;
z-index: -2;
}
.cri-kee::after {
/* right antenna */
border-radius: 100%;
border-right: 0.4rem solid #282828;
height: 26rem;
right: -4rem;
top: calc(40% - 18rem);
-webkit-transform: rotateZ(35deg);
transform: rotateZ(35deg);
width: 10rem;
z-index: -2;
}
.cri-kee .head {
background-color: #694ca6;
border-radius: 100%;
height: 8.5rem;
top: 40%;
-webkit-transform: rotateZ(30deg);
transform: rotateZ(30deg);
width: 10rem;
}
.cri-kee .head .eyes .left .eye-wrinkle,
.cri-kee .head .eyes .right .eye-wrinkle,
.cri-kee .head .face-wrinkles::before,
.cri-kee .head .face-wrinkles::after,
.cri-kee .head .mouth .smile .wrinkles::before,
.cri-kee .head .mouth .smile .wrinkles::after {
background-color: #694ca6;
border: 0.15rem solid #3c334e;
border-width: .15rem 0 0 0;
border-radius: 100%;
}
.cri-kee .head .eyes {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 60%;
-ms-flex-pack: distribute;
justify-content: space-around;
left: 5%;
-webkit-transform: rotateZ(10deg);
transform: rotateZ(10deg);
width: 100%;
z-index: 1;
}
.cri-kee .head .eyes .left,
.cri-kee .head .eyes .right {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #694ca6;
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 35%;
}
.cri-kee .head .eyes .left::after,
.cri-kee .head .eyes .right::after {
/* pupil */
background-color: #282828;
border-radius: 100%;
height: 25%;
left: .55rem;
bottom: 12%;
-webkit-transform: rotateZ(-10deg);
transform: rotateZ(-10deg);
width: 20%;
}
.cri-kee .head .eyes .left::before,
.cri-kee .head .eyes .right::before {
/* eye white */
background-color: #eee;
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
height: calc(100% - 1em);
left: .5rem;
top: .8rem;
width: calc(100% - 1rem);
}
.cri-kee .head .eyes .left {
box-shadow: inset 0.2rem 0.4rem 0 -0.05rem #3c334e;
}
.cri-kee .head .eyes .left .eye-wrinkle {
height: 1rem;
left: -.4rem;
top: 50%;
-webkit-transform: rotateZ(20deg);
transform: rotateZ(20deg);
width: 60%;
}
.cri-kee .head .eyes .right {
box-shadow: inset -0.2rem 0.4rem 0 -0.05rem #3c334e;
}
.cri-kee .head .eyes .right .eye-wrinkle {
height: .6rem;
right: -.6rem;
top: 45%;
-webkit-transform: rotateZ(-33deg);
transform: rotateZ(-33deg);
width: 65%;
}
.cri-kee .head .face-wrinkles {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transform: rotateZ(15deg);
transform: rotateZ(15deg);
width: 50%;
z-index: 1;
}
.cri-kee .head .face-wrinkles::before {
height: .8rem;
left: 85%;
top: -.6rem;
width: 45%;
}
.cri-kee .head .face-wrinkles::after {
height: .6rem;
left: 95%;
top: -.2rem;
-webkit-transform: rotateZ(-10deg);
transform: rotateZ(-10deg);
width: 30%;
}
.cri-kee .head .mouth {
background-color: #694ca6;
border-radius: 90% 60% 60% 80%;
height: 7rem;
left: 5%;
overflow: hidden;
top: -38%;
-webkit-transform: rotateZ(29deg) skew(-10deg);
transform: rotateZ(29deg) skew(-10deg);
width: 8.5rem;
}
.cri-kee .head .mouth .smile {
/* extra shape added to head */
background-color: transparent;
border-bottom: 0.2rem solid #3c334e;
border-right: 0.2rem solid #3c334e;
border-radius: 100% 80% 140% 100% / 0% 90% 100% 80%;
height: 68%;
left: 18%;
top: 24%;
-webkit-transform: rotateZ(12deg) skew(-5deg);
transform: rotateZ(12deg) skew(-5deg);
width: 76%;
}
.cri-kee .head .mouth .smile::before {
/* cut the smile */
background-color: #694ca6;
height: 100%;
left: -20%;
top: -34%;
-webkit-transform: rotateZ(-30deg);
transform: rotateZ(-30deg);
width: 110%;
}
.cri-kee .head .mouth .smile .wrinkles::before {
/* right */
background-color: transparent;
height: .8rem;
left: 93%;
top: .9rem;
-webkit-transform: rotateZ(-65deg);
transform: rotateZ(-65deg);
width: 18%;
}
.cri-kee .head .mouth .smile .wrinkles::after {
/* left */
background-color: transparent;
height: .8rem;
left: 7%;
top: 4rem;
-webkit-transform: rotateZ(-65deg);
transform: rotateZ(-65deg);
width: 15%;
}
.cri-kee .thorax {
background-image: -webkit-radial-gradient(ellipse farthest-corner, #6580cc 0%, #566aa3 100%);
background-image: radial-gradient(ellipse farthest-corner, #6580cc 0%, #566aa3 100%);
border: 0.2rem solid #4d5d8a;
border-radius: 60% 60% 90% 60%/ 60% 60% 90% 90%;
height: 13rem;
left: .3rem;
overflow: hidden;
top: calc(40% - 2rem);
-webkit-transform: rotateZ(-15deg);
transform: rotateZ(-15deg);
width: 8.5rem;
z-index: -3;
}
.cri-kee .thorax .segments,
.cri-kee .thorax .segments::after,
.cri-kee .thorax .segments::before {
background-color: transparent;
border: 0.2rem solid #4d5d8a;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
height: 120%;
}
.cri-kee .thorax .segments {
/* first thorax segment */
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
left: -30%;
top: -80%;
-webkit-transform: rotateZ(-50deg);
transform: rotateZ(-50deg);
width: 200%;
}
.cri-kee .thorax .segments::after {
/* second segment */
background-color: transparent;
left: -16%;
top: -2%;
-webkit-transform: rotateZ(-130deg);
transform: rotateZ(-130deg);
width: 90%;
}
.cri-kee .thorax .segments::before {
/* third segment */
background-color: transparent;
