<!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>
body {
background: black;
}
.content {
position: relative;
width: 800px;
height: 600px;
background: #02111C;
margin: 90px auto;
}
.hada {
position: absolute;
width: 800px;
height: 700px;
-webkit-transform: scale(.5);
transform: scale(.5);
margin: 50px 0;
-webkit-animation: volar9 3s alternate infinite;
animation: volar9 3s alternate infinite;
}
.cara {
position: relative;
width: 102px;
height: 102px;
border-radius: 100%;
background: #ffcc99;
margin: 55px auto;
}
.ojo {
position: absolute;
width: 30px;
height: 35px;
border-radius: 30px 300px 30px 300px;
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg);
background: white;
margin: 39px 9px;
-webkit-animation: abre 3s alternate infinite;
animation: abre 3s alternate infinite;
}
.ojo::before {
content: "";
display: block;
width: 23px;
height: 23px;
border-radius: 100%;
background: #339966;
margin: 7px 5px
}
.ojo::after {
content: "";
display: block;
width: 12px;
height: 12px;
border-radius: 100%;
background: white;
margin: -30px 14px
}
.ojo3 {
position: absolute;
width: 30px;
height: 35px;
border-radius: 30px 300px 30px 300px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
background: white;
margin: 39px 65px;
-webkit-animation: abre 3s alternate infinite;
animation: abre 3s alternate infinite;
}
.ojo3::before {
content: "";
display: block;
width: 23px;
height: 23px;
border-radius: 100%;
background: #339966;
margin: 7px 4px
}
.ojo3::after {
content: "";
display: block;
width: 12px;
height: 12px;
border-radius: 100%;
background: white;
margin: -27px 16px
}
.nariz {
position: absolute;
width: 16px;
height: 12px;
border-radius: 21px 21px 0 0;
border-top: 6px solid #f7bd73;
margin: 73px 45px
}
.nariz::before {
content: "";
display: block;
width: 21px;
height: 12px;
border-radius: 0 0 30px 30px;
background: #ff6666;
margin: 5px -3px;
}
.hair {
position: absolute;
width: 116px;
height: 53px;
border-radius: 112px 112px 0 0;
background: #8f38b0;
margin: -23px -6px;
}
.hair::before {
content: "";
display: block;
width: 132px;
height: 152px;
border-radius: 100%;
border-left: 25px solid #8f38b0;
margin: 0px -7px
}
.hair::after {
content: "";
display: block;
width: 132px;
height: 152px;
border-radius: 100%;
border-right: 25px solid #8f38b0;
margin: -152px -33px
}
.hair3 {
position: absolute;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 212px solid #8f38b0;
margin: 77px -9px
}
.hair3::before {
content: "";
display: block;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 192px solid #8f38b0;
margin: -212px -12px
}
.hair4 {
position: absolute;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 212px solid #8f38b0;
margin: 77px 90px
}
.hair4::before {
content: "";
display: block;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 192px solid #8f38b0;
margin: -192px -12px
}
.vincha {
position: absolute;
width: 109px;
height: 12px;
border-radius: 21px 21px 0 0;
background: #cc0099;
margin: 3px -3px;
}
.vincha::before {
content: "";
display: block;
width: 21px;
height: 21px;
border-radius: 100%;
border: 2px solid #339966;
margin: -7px 41px;
}
.cuello {
position: absolute;
width: 16px;
height: 21px;
background: #ffcc99;
margin: 155px 393px
}
.cuello::before {
content: "";
display: block;
width: 96px;
height: 21px;
border-radius: 152px 152px 0 0;
background: #ffcc99;
margin: 21px -43px;
}
.cuello::after {
content: "";
display: block;
width: 0;
height: 0;
border-left: 43px solid transparent;
border-right: 43px solid transparent;
border-top: 123px solid #cc0099;
margin: -21px -37px
}
.vestido {
position: absolute;
width: 121px;
height: 170px;
border-top: 21px solid #cc0099;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-radius: 100px / 100px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
margin: 162px 412px
}
.vestido::before {
content: "";
display: block;
width: 121px;
height: 170px;
border-top: 21px solid #cc0099;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-radius: 100px / 100px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
margin: -212px -21px
}
.falda {
position: absolute;
width: 0;
height: 0;
border-left: 65px solid transparent;
border-right: 65px solid transparent;
border-bottom: 132px solid #8f38b0;
margin: 241px 333px
}
.brazos {
position: absolute;
width: 17px;
height: 90px;
border-radius: 100%;
background: #ffcc99;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: 172px 312px
}
.brazos::before {
content: "";
display: block;
width: 12px;
height: 112px;
border-radius: 100%;
background: #ffcc99;
margin: 50px 3px
}
.brazos::after {
content: "";
display: block;
width: 7px;
height: 21px;
border-radius: 100%;
background: #ffcc99;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: -60px 0px
}
.brazos3 {
position: absolute;
width: 17px;
height: 90px;
border-radius: 100%;
background: #ffcc99;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin: 170px 460px
}
.brazos3::before {
content: "";
display: block;
width: 12px;
height: 112px;
border-radius: 100%;
background: #ffcc99;
margin: 50px 3px
}
.brazos3::after {
content: "";
display: block;
width: 7px;
height: 21px;
border-radius: 100%;
background: #ffcc99;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin: -60px 10px
}
.varita {
position: absolute;
width: 5px;
height: 90px;
background: #333;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin: 231px 207px
}
.legs {
position: absolute;
width: 35px;
height: 152px;
border-radius: 100%;
background: #ffcc99;
margin: 321px 340px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg)
}
.legs::after {
content: "";
display: block;
width: 21px;
height: 50px;
border-radius: 100%;
background: #cc0099;
margin: -155px 125px;
-webkit-transform: rotate(-70deg);
transform: rotate(-70deg)
}
.legs::before {
content: "";
display: block;
width: 25px;
height: 132px;
border-radius: 100%;
background: #ffcc99;
margin: 105px 53px;
-webkit-transform: rotate(-60deg);
transform: rot