div+css实现点线状立体星球卫星旋转动画效果代码-html代码-BFW代码库

div+css实现点线状立体星球卫星旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现点线状立体星球卫星旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    body {
	background-color:#000;
}
@keyframes spin {
	to {
	transform:rotateY(-360deg);
}
}@keyframes show {
	to {
	opacity:1;
}
}@keyframes flicker-on-2 {
	0% {
	opacity:0;
}
10% {
	opacity:1;
}
15% {
	opacity:0;
}
30% {
	opacity:1;
}
55% {
	opacity:1;
}
57% {
	opacity:0;
}
75% {
	opacity:0;
}
76% {
	opacity:1;
}
99% {
	opacity:0;
}
100% {
	opacity:1;
}
}.component-wrapper {
	position:absolute;
}
.scene {
	position:absolute;
	top:10rem;
	left:10rem;
	width:25rem;
	height:25rem;
	margin:2% auto;
	perspective:100rem;
	animation:flicker-on-2 1000ms linear 1500ms forwards;
	opacity:0;
}
.wrapper {
	width:100%;
	height:100%;
	transform:rotateX(-8deg) rotateY(0deg);
	transform-style:preserve-3d;
}
.globe {
	position:relative;
	width:70%;
	height:70%;
	margin:0 auto;
	transform-style:preserve-3d;
	animation:spin 25s 0ms linear infinite;
}
.ring {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:.3rem;
	border-style:dotted;
	border-radius:50%;
	color:#7ad4f8;
	animation:show 0.75s forwards ease-in-out;
	opacity:0;
}
.ring:nth-child(1) {
	transform:rotateY(4deg);
}
.ring:nth-child(2) {
	transform:rotateY(30deg);
}
.ring:nth-child(3) {
	tran.........完整代码请登录后点击上方下载按钮下载查看