<!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 {
width: 100%;
height: 100%;
background-color: #0093ff;
overflow: hidden;
}
.sun {
position: absolute;
top: 50%;
left: 50%;
width: 50vmin;
height: 50vmin;
margin: -25vmin;
animation: float 5s infinite;
}
.sun .orays {
animation: ospin 10s infinite linear;
}
.sun .orays,
.sun .orays::before,
.sun .orays::after {
position: absolute;
width: 100%;
height: 100%;
border-radius: 5%;
background-color: #fff;
}
.sun .orays::before {
content: "";
transform: rotate(30deg);
}
.sun .orays::after {
content: "";
transform: rotate(60deg);
}
.sun .oface {
position: absolute;
margin: -10%;
width: 120%;
height: 120%;
border-radius: 100%;
background-color: #fff;
transform: scale(1.05);
}
.sun .rays {
animation: spin 10s infinite linear;
}
.sun .rays,
.sun .rays::before,
.sun .rays::after {
position: absolute;
width: 100%;
height: 100%;
border-radius: 5%;
background-color: #ffb02b;
}
.sun .rays::before {
content: "";
transform: rotate(30deg);
}
.sun .rays::after {
content: "";
transform: rotate(60deg);
}
.sun .face {
position: relative;
margin: -10%;
width: 120%;
height: 120%;
border-radius: 100%;
background-color: #ffb02b;
}
.sun .face::before {
content: "";
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
border-radius: 100%;
background-color: #ffec00;
}
.sun .face .eye {
position: absolute;
top: 40%;
width: 7%;
height: 7%;
border-radius: 100%;
background-color: #756b01;
transform: translateY(-50%);
animation: blink 15s infinite;
}
.sun .face .left.eye {
left: 25%;
}
.sun .face .right.eye {
right: 25%;
}
.sun .face .cheek {
position: absolute;
top: 46%;
width: 4%;
height: 4%;
border-radius: 100%;
background-color: rgba(255, 176, 43, 0.6);
transform: scale(2.5, 0.75);
}
.sun .face .left.cheek {
left: 25%;
}
.sun .face .right.cheek {
right: 25%;
}
.sun .face .mouth {
position: absolute;
top: 42%;
left: 35%;
width: 30%;
height: 16%;
border-radius: 20% 20% 60% 60% / 30% 30% 100% 100%;
background-color: #756b01;
overflow: hidden;
transform: translate(0);
}
.sun .face .mouth::after {
content: "";
position: absolute;
top: 30%;
left: 15%;
width: 70%;
height: 100%;
border-radius: 100%;
background-color: #f04e50;
}
@keyframes blink {
0% {
height: 1%;
}
2% {
height: 7%;
}
100% {
height: 7%;
}
}
@keyframes float {
0% {
margin-top: -22vmin;
}
50% {
margin-top: -27vmin;
}
100% {
margin-top: -22vmin;
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes ospin {
0% {
transform: scale(1.05) rotate(0deg);
}
100% {
transform: scale(1.05) rotate(360deg);
}
}
</style>
</head>
<body>
<div class='sun'>
<div class='orays'></div>
<div class='oface'></div>
<div class='rays'></div>
<div class='face'>
<div class='left eye'></div>
<div class='right eye'></div>
<div class='left cheek'></div>
<div class='right cheek'></div>
<div class='mouth'></div>
</div>
</div>
</body>
</html>