<!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>
</head>
<style>
html, body {
height: 100%;
}
body {
background: radial-gradient(ellipse at center, #34679a 0%,#214163 47%,#0d1926 100%);
}
body > div {
position: absolute;
top: 12%;
left: 50%;
margin-left: -103px;
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid #fff;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(80deg) rotateY(20deg);
transform-style: preserve-3d;
transform: rotateX(80deg) rotateY(20deg);
}
body > div:first-of-type:after {
content: "";
position: absolute;
height: 40px;
width: 40px;
background: #fff;
border-radius: 50%;
-webkit-transform: rotateX(-80deg) rotateY(0);
transform: rotateX(-80deg) rotateY(0);
box-shadow: 0 0 25px #fff;
-webkit-animation: nucleus_ 2s infinite linear;
animation: nucleus_ 2s infinite linear;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -20px;
}
body > div:nth-of-type(2) {
-webkit-transform: rotateX(-80deg) rotateY(20deg);
transform: rotateX(-80deg) rotateY(20deg);
}
body > div:nth-of-type(3) {
-webkit-transform: rotateX(-70deg) rotateY(60deg);
transform: rotateX(-70deg) rotateY(60deg);
}
body > div:nth-of-type(4) {
-webkit-transform: rotateX(70deg) rotateY(60deg);
transform: rotateX(70deg) rotateY(60deg);
}
body > div > div {
width: 200px;
height: 200px;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-animation: trail_ 2s infinite linear;
transform-style: preserve-3d;
animation: trail_ 2s infinite linear;
}
body > div > div:after {
content: "";
position: absolute;
top: -5px;
box-shadow: 0 0 12px #fff;
left: 50%;
margin-left: -5px;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #fff;
-webkit-animation: particle_ 2s infinite linear;
animation: particle_ 2s infinite linear;
}
body > div:nth-of-type(2) > div,
body > div:nth-of-type(2) > div:after {
-webkit-animation-delay: -.5s;
animation-delay: -.5s;
}
body > div:nth-of-type(3) > div,
body > div:nth-of-type(3) > div:after {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
body > div:nth-of-type(4) > div,
body > div:nth-of-type(4) > div:after {
-webkit-animation-delay: -1.5s;
animation-delay: -1.5s;
}
@-webkit-keyframes trail_ {
from {
-webkit-transform: rotateZ(0deg);
} to {
-webkit-transform: rotateZ(360deg);
}
}
@keyframes trail_ {
from {
transform: rotateZ(0deg);
} to {
transform: rotateZ(360deg);
}
}
@-webkit-keyframes particle_ {
from {
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
} to {
-webkit-transform: rotateX(90deg) rotateY(-360deg);
transform: rotateX(90deg) rotateY(-360deg);
}
}
@keyframes particle_ {
from {
transform: rotateX(90deg) rotateY(0deg);
} to {
transform: rotateX(90deg) rotateY(-360deg);
}
}
@keyframes nucleus_ {
0% {
box-shadow: 0 0 0 transparent;
} 50% {
box-shadow: 0 0 25px #fff;
} 100% {
box-shadow: 0 0 0 transparent;
}
}
@-webkit-keyframes nucleus_ {
0% {
box-shadow: 0 0 0 transparent;
} 50% {
box-shadow: 0 0 25px #fff;
} 100% {
box-shadow: 0 0 0 transparent;
}
}
</style>
<body>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
</body>
</html>