html+css3太阳系行星运转动画效果的实现代码

2019-01-15 09:16:06刘景俊

太阳系容器div的css:

定宽,定高,relative定位,页面内剧中对齐。

CSS Code复制内容到剪贴板
  • .solarsys{                width: 800px;   
  •             height: 800px;;                position: relative;   
  •             margin: 0 auto;                background-color: #000000;   
  •             padding: 0;                transform: scale(1);   
  •         }  

    太阳div的css:

    按照设计的大小和位置,设定宽高,left,top。

    设定颜色。

    通过把boder-radius生成50%,把一个正方形变成圆形。

    通过box-shadow的4层颜色设置实现太阳光晕。

    CSS Code复制内容到剪贴板
  • .sun {                left:357px;   
  •             top:357px;                height: 90px;   
  •             width: 90px;                background-color: rgb(248,107,35);   
  •             border-radius: 50%;                box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);   
  •             position: absolute;                margin: 0;   
  •         }  

    行星轨道div的css:

    假设是水星轨道。

    按照设计的大小和位置,设定宽高,left,top。

    背景色透明。

    通过把boder-radius生成50%,把一个正方形变成圆形。