css3--我们太阳系

最新推荐文章于 2024-06-12 09:49:54 发布

不断学习的ITer

最新推荐文章于 2024-06-12 09:49:54 发布

阅读量1k

点赞数

分类专栏： HTML特殊标签/CSS HTML5

本文链接：https://blog.csdn.net/wyqlxy/article/details/38017197

版权

HTML特殊标签/CSS 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

HTML5

22 篇文章 0 订阅

订阅专栏

这个网址上有个利用css3实现太阳系运动的例子。主要用到：CSS3 border-radius, transforms & animations 属性实现

我在上面基础上得到一个简化版本：只有水星和金星。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>CSS3 太阳系运行</title>
  <style type="text/css">
* {
    margin: 0;
    padding: 0;
}
ul.solarsystem {
    position: relative;
    height: 640px;
  margin-left: -40px;
    list-style: none;
    -webkit-transition: all 0.09s ease-in;
    -moz-transition: all 0.09s ease-in;
    -o-transition: all 0.09s ease-in;
    transition: all 0.09s ease-in;
}
ul.solarsystem li {
    text-indent: -9999px;
    overflow: hidden;
    display: block;
    position: absolute;
    border: 2px solid #394057;
/*    opacity: 0.7;*/
}
ul.solarsystem li span {
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
ul.solarsystem li.active {
    border-color: #aa4200;
}
ul.solarsystem li.active.sun,
ul.solarsystem li.active span {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
}
ul.solarsystem li.active.sun span,
ul.solarsystem li.active.earth .moon {
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
ul.solarsystem li.sun {
    width: 40px;
    height: 40px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: #fc3;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.22, rgb(204,153,0)),
        color-stop(1, rgb(255,219,112))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(204,153,0) 22%,
        rgb(255,219,112) 100%
    );
    top: 302px;
    left: 462px;
    border: none;
    -webkit-box-shadow: 0 0 50px #c90;
    -moz-box-shadow: 0 0 50px #c90;
    box-shadow: 0 0 50px #c90;
    z-index: 100;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
ul.solarsystem li.sun span {
    width: 60px;
    height: 60px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;   
}
ul.solarsystem li.mercury {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 52px;
    -moz-border-radius: 52px;
    border-radius: 52px;
    top: 270px;
    left: 430px;
    z-index: 99;
}
ul.solarsystem li.mercury span {
    background: #b6bac5;
    top: 10px;
    left: 10px;
}
ul.solarsystem li.venus {
    width: 160px;
    height: 160px;
    -webkit-border-radius: 82px;
    -moz-border-radius: 82px;
    border-radius: 82px;
    top: 240px;
    left: 400px;
    z-index: 98;
}
ul.solarsystem li.venus span {
    background: #bf8639;
    top: 118px;
    left: 5px;
}
ul.solarsystem li {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
}
ul.solarsystem li.earth span {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:moon;
}
ul.solarsystem li.mercury {-webkit-animation-duration:5s;}
ul.solarsystem li.venus {-webkit-animation-duration:8s;}
@-webkit-keyframes orbit { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }
@-webkit-keyframes moon { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }

ul li {
  list-style:none;
}    
  </style>
</head>
<body>
     <section class="clearfix">
        <ul class="solarsystem">
          <li class="sun"><a href="#sun"><span>太阳</span></a></li>
          <li class="mercury"><a href="#mercury"><span>水星</span></a></li>
          <li class="venus"><a href="#venus"><span>金星</span></a></li>
          <li class="earth"><a href="#earth"><span>地球<span class="moon"> & 月球</span></span></a></li>
          <li class="mars"><a href="#mars"><span>火星</span></a></li>
          <li class="asteroids_meteorids"><span>小行星 & 星际石</span></li>
          <li class="jupiter"><a href="#jupiter"><span>木星</span></a></li>
          <li class="saturn"><a href="#saturn"><span>土星 & <span class="ring">土星环</span></span></a></li>
          <li class="uranus"><a href="#uranus"><span>天王星</span></a></li>
          <li class="neptune"><a href="#neptune"><span>海王星</span></a></li>
          <li class="pluto"><a href="#pluto"><span>冥王星</span></a></li>
        </ul>
      </section>
</body>
</html>

我先大致说下原理，然后再来分析代码。

原理：说白了就是一个先画一个静态的星空图，然后通过各层的差异旋转实现系统图的运行。

具体如下：定位UL到页面中心位置。每个圆圈都是一个LI，利用border-radius实现。然后在这个点上设置一个标签span，当然也是利用圆角效果，实现一个小圆。然后利用

tranform的keyframes（关键帧），利用旋转来处理标签span的圆周运动。最后利用animation-duration 来处理这个圆周运动的运行时间。这个例子里天体运行最主要应用的就是控件的无限旋转rotate（0-360deg）。可以不用一行js，就可以实现天体运行了。当然如果用js canvas实现的话也很简单。

分析代码：

-webkit-transition: all 0.2s ease-in; // 该控件的所有属性规定完成过渡效果需要多少秒或毫秒规定速度效果的速度曲线（规定以慢速开始的过渡效果）

@-webkit-keyframes orbit ; //通过 @keyframes 规则，创建复杂的动画。设置开始--进行--结束各个点控件的位置，样式等

-webkit-animation-duration : 5s ;// 规定完成过渡效果需要多少秒或毫秒。

对于初学者来说有个东西要注意：你看到好多代码在同一控件上操作同一样式属性，后面的属性会覆盖前面的属性。

当然还要注意的是样式的优先级--控件内置SYTLE 样式>ID样式>class样式