css3 制作阳光,用css画一个太阳

Document

.sun {

position: absolute;

right: 200px;

top: 50px;

width: 150px;

height: 150px;

border-radius: 50%;

background: #f8e353;

}

.sun::before {

content: "";

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 130px;

height: 130px;

border-radius: 50%;

background: #ffd21f;

filter: blur(10px);

z-index: 1;

animation: inlineSun 5s ease infinite;

}

.sun::after {

content: "";

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 180px;

height: 180px;

border-radius: 50%;

background: #fcf17c;

z-index: -1;

box-shadow: 0 0 40px #ffd21f;

animation: sun 5s ease-in infinite;

}

@keyframes inlineSun {

0% {

opacity: 1;

}

50% {

opacity: 0.5;

width: 70px;

height: 70px;

}

100% {

opacity: 1;

}

}

@keyframes sun {

0% {

box-shadow: 0 0 90px #ffd21f;

}

50% {

box-shadow: 0 0 30px #ffd21f;

}

100% {

box-shadow: 0 0 90px #ffd21f;

}

}