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