css模拟宇宙中太阳系行星轨迹动画效果代码-html代码-BFW代码库

css模拟宇宙中太阳系行星轨迹动画效果代码

代码语言：html

所属分类：动画

代码描述：css模拟宇宙中太阳系行星轨迹动画效果代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<style>
:root 
{
    --dark-color: rgb(0,0,0);
    --glossy-red: rgba(238, 17, 17, 1);
    --light-red: rgba(238, 17, 17, .5);
    --very-light-red: rgba(238, 17, 17, .25);
    --planets-theme: var(--light-red) var(--light-red) var(--light-red) var(--glossy-red) ;
    --paths-theme: var(--very-light-red) var(--glossy-red);
}
*
{
    box-sizing: border-box;
    padding: 0;
    border: 0;
}
body
{
    overflow: hidden;

    background-color: var(--dark-color);
}

#solar-system
{
    display: flex;

    width: 100vw;
    height: 100vh;

    -webkit-transform: skewX(-45deg);
       -moz-transform: skewX(-45deg);
        -ms-transform: skewX(-45deg);
         -o-transform: skewX(-45deg);
            transform: skewX(-45deg);
    transform-origin: center;

    justify-content: center;
    align-items: center;
}

/* planets */

#sun
{
    position: fixed;
    z-index: 100;

    width: 174.085px;
    height: 174.085px;

    -webkit-transform: skewX(45deg);
       -moz-transform: skewX(45deg);
        -ms-transform: skewX(45deg);
         -o-transform: skewX(45deg);
            transform: skewX(45deg);

    border-radius: 50%;
            background: linear-gradient(135deg, var(--glossy-red) 20%, transparent 100%);

    -webkit-background: linear-gradient(135deg, var(--glossy-red) 20%, transparent 100%);
       -moz-background: linear-gradient(135deg, var(--glossy-red) 20%, transparent 100%);
         -o-background:.........完整代码请登录后点击上方下载按钮下载查看