返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

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

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

boder的类型设成虚线。

boder的颜色设成灰色。

宽度设1。

CSS Code复制内容到剪贴板
  • .mercuryOrbit {                left:342.5px;   
  •             top:342.5px;                height: 115px;   
  •             width: 115px;                background-color: transparent;   
  •             border-radius: 50%;                border-style: dashed;   
  •             border-color: gray;                position: absolute;   
  •             border-width: 1px;                margin: 0px;   
  •             padding: 0px;            }  

    行星div的css：

    假设是水星。

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

    设置颜色。

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

    将transfrom-origin设定成当前div的左上角相对于整个太阳系容器的中心点的横向和纵向的偏移量。加上旋转动画后就是围绕着中心点旋转效果。 

    做一个animation，引用rotate关键帧动画，线性永久执行，这里的执行时长是根据行星的公转周期计算出来。

    CSS Code复制内容到剪贴板
  • .mercury {                left:337.5px;   
  •             top:395px;                height: 10px;   
  •             width: 10px;                background-color: rgb(166,138,56);   
  •             border-radius: 50%;                position: absolute;   
  •             transform-origin: 62.5px 5px;                animation: rotate 1.5s infinite linear;   
  •         }  
    • 相关文章 大家在看