style.css代码:
body {
background: #3474de;
}
.box {
position: relative;
margin: auto;
display: block;
margin-top: 15%;
width: 600px;
height: 420px;
}
/*sun*/
.sun {
position: absolute;
background: #FFF054;
top: 15%;
right: 30%;
width: 140px;
height: 140px;
border-radius: 50%;
box-shadow: 0px 0px 30px 15px #fff9ba;
animation: pulse 2s infinite;
}
.face {
position: absolute;
}
.face:before, .face:after {
content: '';
position: absolute;
width: 9px;
height: 9px;
background: #000000;
border-radius: 50%;
z-index: 5;
}
.face:before {
top: 20px;
left: 60px;
}
.face:after {
top: 20px;
left: 100px;
}
.smile {
position: absolute;
top: 27px;
left: 79px;
width: 10px;
height: 10px;
border: 3px solid;
border-radius: 50%;
border-color: transparent #000 #000 transparent;
transform: rotate(45deg);
}
.pupil-left {
position: absolute;
border-radius: 50%;
height: 3px;
width: 3px;
left: 63px;
top: 20px;
background: #ffffff;
z-index: 7;
}
.pupil-right {
position: absolute;
border-radius: 50%;
height: 3px;
width: 3px;
left: 104px;
top: 20px;
background: #ffffff;
z-index: 7;
}
/*ray*/
.ray {
position: absolute;
margin: auto;
width: 150px;
top: 0;
left: 0;
right: 0;
bottom: 0;
animation: spin 15s linear infinite;
}
.beam {
background: linear-gradient(0deg, rgba(255, 255, 255, 0), #FFF054 40%, #FFF054);
margin-left: 10px;
border-radius: 50% 50% 0 0;
position: absolute;
opacity: 0.2;
}
.r1 {
height: 120px;
width: 40px;
transform: rotate(180deg);
top: -120px;
left: 42px;
}
.r2 {
height: 120px;
width: 30px;
transform: rotate(210deg);
top: -100px;
right: -5px;
}
.r3 {
height: 120px;
width: 50px;
transform: rotate(255deg);
top: -30px;
right: -65px;
}
.r4 {
height: 120px;
width: 24px;
transform: rotate(300deg);
top: 60px;
left: 150px;
}
.r5 {
height: 120px;
width: 40px;
top: 135px;
left: 40px;
}
.r6 {
height: 120px;
width: 30px;
transform: rotate(-35deg);
top: 115px;
right: -12px;
}
.r7 {
height: 120px;
width: 45px;
transform: rotate(45deg);
top: 100px;
left: -45px;
}
.r8 {
height: 130px;
width: 20px;
transform: rotate(75deg);
top: 40px;
left: -70px;
}
.r9 {
height: 120px;
width: 50px;
transform: rotate(-255deg);
top: -30px;
left: -80px;
}
.r10 {
height: 130px;
width: 20px;
transform: rotate(150deg);
top: -110px;
left: -20px;
}
/*cloud*/
.cloud {
position: absolute;
background: #F4F4F4;
width: 250px;
height: 100px;
top: 40%;
left: 25%;
border-radius: 100px;
}
.cloud-right {
width: 100px;
height: 100px;
top: -50%;
right: 15%;
background: #F4F4F4;
border-radius: 50%;
position: absolute;
}
.cloud-left {
width: 110px;
height: 110px;
top: -65%;
left: 15%;
border-radius: 200px;
background: #F4F4F4;
position: absolute;
}
.cloud-bottom {
width: 120px;
height: 120px;
bottom: -25%;
right: 21%;
border-radius: 100px;
background: #F4F4F4;
position: absolute;
}
.eye-left {
position: absolute;
background: black;
width: 15px;
height: 15px;
border-radius: 50%;
top: 40%;
left: 30%;
z-index: 4;
}
.eye-right {
position: absolute;
background: black;
width: 15px;
height: 15px;
border-radius: 50%;
top: 40%;
right: 30%;
z-index: 4;
}
.pupil {
position: absolute;
border-radius: 50%;
height: 5px;
width: 5px;
right: 13%;
background: #ffffff;
}
.mouth {
position: absolute;
top: 59%;
right: 46%;
width: 10px;
height: 10px;
border: 3px solid;
border-radius: 50%;
border-color: #000 transparent transparent #000;
transform: rotate(45deg);
}
.raindrop-left {
position: absolute;
top: 70%;
left: 25%;
width: 5px;
height: 5px;
border-radius: 0 50% 50% 50%;
background: #B5DBE0;
border: 3px solid #B5DBE0;
transform: rotate(45deg);
}
.tear-left {
position: absolute;
top: 65px;
left: 25%;
width: 3px;
height: 3px;
border-radius: 0 50% 50% 50%;
background: #B5DBE0;
border: 3px solid #B5DBE0;
transform: rotate(45deg);
animation: falling 3s infinite;
}
.tear-right {
position: absolute;
top: 65px;
right: 25%;
width: 3px;
height: 3px;
border-radius: 0 50% 50% 50%;
background: #B5DBE0;
border: 3px solid #B5DBE0;
transform: rotate(45deg);
animation: falling 5s infinite;
}
.rain {
width: 8px;
height: 8px;
background: #B5DBE0;
border-radius: 0 50% 50% 50%;
transform: rotate(45deg);
}
.drop {
position: absolute;
z-index: 1;
opacity: 0;
}
.raining {
animation: raining 3s infinite ease-in;
}
/*animations*/
@keyframes spin {
0% {
transform: rotate(0deg);
opacity: .5;
}
100% {
transform: rotate(360deg);
opacity: 1;
}
}
@keyframes pulse {
0% {
transform: scale(1);
animation-timing-function: ease-in;
}
50% {
transform: scale(1.2);
animation-timing-function: ease-out;
}
100% {
transform: scale(1);
}
}
@keyframes raining {
0% {
top: 60%;
z-index: -10;
opacity: 1;
}
100% {
top: 600px;
opacity: 0;
}
}
@keyframes falling {
from {
opacity: 1;
transform: translate(0px, 0px), rotate(45deg);
}
to {
opacity: 0;
transform: translate(0px, 50px);
}
}
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3绘制卡通蓝天白云太阳表情动画特效</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="box">
<div class="sun">
<div class="face">
<div class="pupil-left"></div>
<div class="pupil-right"></div>
<div class="smile"></div>
</div>
<div class="ray">
<div class="beam r1"></div>
<div class="beam r2"></div>
<div class="beam r3"></div>
<div class="beam r4"></div>
<div class="beam r5"></div>
<div class="beam r6"></div>
<div class="beam r7"></div>
<div class="beam r8"></div>
<div class="beam r9"></div>
<div class="beam r10"></div>
</div>
</div>
<div class="cloud">
<div class="cloud-left"></div>
<div class="cloud-right"></div>
<div class="cloud-bottom"></div>
<div class="eye-left"><div class="pupil"></div></div>
<div class="eye-right"><div class="pupil"></div></div>
<div class="mouth"></div>
<div class="tear-left"></div>
<div class="tear-right"></div>
</div>
</div>
<div style="text-align:center;margin:-50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
</div>
</body>
</html>