css3实现球体,CSS3实现的光环球体旋转动画
CSS
语言：
CSSSCSS
确定
body {
background: #1d1f20;
overflow: hidden;
}
.wrapper {
perspective: 800px;
display: flex;
justify-content: center;
filter: blur(1.5px);
}
.container {
transform: rotateX(40deg) rotateY(40deg) rotateZ(90deg);
transform-style: preserve-3d;
position: relative;
display: flex;
height: 300px;
width: 300px;
margin: 100px 0;
}
.sphere,
.ring {
position: absolute;
height: 100%;
width: 100%;
transform-style: preserve-3d;
}
.sphere {
animation: rotateSphere 10s linear infinite;
}
.sphere:nth-of-type(1) .ring:nth-of-type(1) {
transform: rotateY(18deg);
}
.sphere:nth-of-type(1) .ring:nth-of-type(2) {
transform: rotateY(36deg);
}
.sphere:nth-of-type(1) .ring:nth-of-type(3) {
transform: rotateY(54deg);
}
.sphere:nth-of-type(1) .ring:nth-of-type(4) {
transform: rotateY(72deg);
}
.sphere:nth-of-type(1) .ring:nth-of-type(5) {
transform: rotateY(90deg);
}
.sphere:nth-of-type(1) .ring:nth-of-type(6) {
transform: rotateY(108deg);
}
.sphere:nth-of-type(1) .ring:nth-of-type(7) {
transform: rotateY(126deg);
}
.sphere:nth-of-type(1) .ring:nth-of-type(8) {
transform: rotateY(144deg);
}
.sphere:nth-of-type(1) .ring:nth-of-type(9) {
transform: rotateY(162deg);
}
.sphere:nth-of-type(1) .ring:nth-of-type(10) {
transform: rotateY(180deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(1) {
transform: rotateX(18deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(2) {
transform: rotateX(36deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(3) {
transform: rotateX(54deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(4) {
transform: rotateX(72deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(5) {
transform: rotateX(90deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(6) {
transform: rotateX(108deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(7) {
transform: rotateX(126deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(8) {
transform: rotateX(144deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(9) {
transform: rotateX(162deg);
}
.sphere:nth-of-type(2) .ring:nth-of-type(10) {
transform: rotateX(180deg);
}
.ring {
border: 1px solid;
box-sizing: border-box;
border-radius: 50%;
opacity: 0;
animation: fadeIn 2000ms ease infinite;
box-shadow: 0 0 80px rgba(255, 255, 255, 0.2), inset 0 0 80px rgba(255, 255, 255, 0.2);
}
.ring:nth-of-type(1) {
border-color: #40E0D0;
animation-delay: 200ms;
}
.ring:nth-of-type(2) {
border-color: #4AE2D2;
animation-delay: 400ms;
}
.ring:nth-of-type(3) {
border-color: #53E3D5;
animation-delay: 600ms;
}
.ring:nth-of-type(4) {
border-color: #5DE5D7;
animation-delay: 800ms;
}
.ring:nth-of-type(5) {
border-color: #66E6D9;
animation-delay: 1000ms;
}
.ring:nth-of-type(6) {
border-color: #70E8DC;
animation-delay: 1200ms;
}
.ring:nth-of-type(7) {
border-color: #79E9DE;
animation-delay: 1400ms;
}
.ring:nth-of-type(8) {
border-color: #83EBE0;
animation-delay: 1600ms;
}
.ring:nth-of-type(9) {
border-color: #8CECE3;
animation-delay: 1800ms;
}
.ring:nth-of-type(10) {
border-color: #96EEE5;
animation-delay: 2000ms;
}
@keyframes rotateSphere {
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
@keyframes fadeIn {
from, to {
opacity: 0;
}
50% {
opacity: 1;
}
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！