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.........完整代码请登录后点击上方下载按钮下载查看