宝宝的css,CSS3 卡通版太阳宝宝

CSS

语言：

CSSSCSS

确定

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);

}

}