css+div实现宇宙中卫星天体运动动画效果代码-html代码-BFW代码库

css+div实现宇宙中卫星天体运动动画效果代码

代码语言：html

所属分类：动画

代码描述：css+div实现宇宙中卫星天体运动动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  


  
  
  
<style>
:root {
	--planet: 200px;
	--orbit1: 400px;
  --orbit2: 350px;
}
html {
	background: radial-gradient(circle, black, hsl(220, 83%, 12%));
}
#container {
	width: 100%;
	height: 100vh;
}
#planet {
	width: var(--planet);
	height: var(--planet);
	background: linear-gradient(red, hsl(25, 90%, 45%));
	border-radius: 50%;
	position: absolute;
	top: calc(50vh - var(--planet)/2);
	left: calc(50% - var(--planet)/2);
}
.star {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	position: absolute;
	background: white;
	transition: box-shadow 300ms, top 500ms ease-in-out, left 1000ms ease;
}
#star1 {
	top: 380px;
	left: 200px;
}
#star2 {
	top: -40px;
	left: -40px;
	animation: glowmove 4s infinite ease-out;
}
#star3 {
	top: 160px;
	left: 260px;
}
#star4 {
	top: 260px;
	left: 70%;
}
#star5 {
	top: 400px;
	left: 0px;
	transform: translate(-50%, -50%);
}
#star6 {
	top: -150px;
	left: 45%;
}
#star7 {
	top: 50px;
	left: -140px;
}
#star8 {
  animation: glowmove2 3.1s reverse infinite ease-in;
}
#planet:hover .star {
	box-shadow: rgba(255, 255, 255, .5) 0 0 20px 20px;
}
#planet:hover #star3 {
	top: -200px;
	left: -140px;
}
#planet:hover #star5 {
	top: 100px;
	left: 380px;
}
.ring {
	width: 600px;
	height: 30px;
	border: solid 1px white;
	border-radius: 50%;
	position: absolute;
	top: calc(50vh - 15px);
	left: calc(50% - 300px);
	transform: rotate(45deg);
	animation: fatten 3s ease-in-out infinite alternate;
}
.ring-front {
	border-top: none;
	border-left: none;
	border-right: none;
}

@keyframes glowmove {
	0% {
		box-shadow: rgba(255, 255, 255, .5) 0 0 20px 20px;
		top: calc(var(--planet)/2 - var(--orbit1));
		left: calc(var(--planet)/2 - var(--orbit1));
	}
	25% {
		top: calc(var(--planet)/2 - var(--orbit1));
		left: calc(var(--planet)/2 + var(--orbit1));
	}
	50% {
		.........完整代码请登录后点击上方下载按钮下载查看