<p style="box-sizing:border-box;margin-top:10px;margin-bottom:10px;color:#555555;line-height:25px;white-space:normal;list-style-type:none;font-stretch:normal;font-size:14px;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-indent:2em;background-color:#FFFFFF;">

巧妙的利用CSS3 来实现这么漂亮的动画的吧!

</p>
<p style="box-sizing:border-box;margin-top:10px;margin-bottom:10px;color:#555555;line-height:25px;white-space:normal;list-style-type:none;font-stretch:normal;font-size:14px;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-indent:2em;background-color:#FFFFFF;">

我不清楚大家对于CSS3的动画了解多少,但是我对于 CSS3的东西还是限制与用什么查什么的阶段。css3的animation动画,结合transform的大小、旋转、位移、斜切,通过两三行代码,便可做出很多有趣的效果。

</p>
<p style="box-sizing:border-box;margin-top:10px;margin-bottom:10px;color:#555555;line-height:25px;white-space:normal;list-style-type:none;font-stretch:normal;font-size:14px;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-indent:2em;background-color:#FFFFFF;">

<a target="_blank" href="http://blog.52hyjs.com/content/uploadfile/201607/36ed1468317185.gif" id="ematt:114"><img src="http://blog.52hyjs.com/content/uploadfile/201607/36ed1468317185.gif" title="点击查看原图" alt="taiyangxi.gif" border="0" width="643" height="608" /></a> 

</p>
<p style="box-sizing:border-box;margin-top:10px;margin-bottom:10px;color:#555555;line-height:25px;white-space:normal;list-style-type:none;font-stretch:normal;font-size:14px;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-indent:2em;background-color:#FFFFFF;">

<br />

</p>
<p style="box-sizing:border-box;margin-top:10px;margin-bottom:10px;color:#555555;line-height:25px;white-space:normal;list-style-type:none;font-stretch:normal;font-size:14px;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-indent:2em;background-color:#FFFFFF;">

<br />

</p>
<h2 style="box-sizing:border-box;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:normal;color:#555555;margin:20px -20px 20px -24px;font-size:18px;padding:10px 20px 9px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#EAEAEA;white-space:normal;font-stretch:normal;border-left-color:#428BCA;border-left-width:4px;border-left-style:solid;text-rendering:optimizeLegibility;background-color:#FBFBFB;">

<span style="box-sizing:border-box;color:#339966;">第一、动画实现的思路</span> 

</h2>
<p style="box-sizing:border-box;margin-top:10px;margin-bottom:10px;color:#555555;line-height:25px;white-space:normal;list-style-type:none;font-stretch:normal;font-size:14px;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-indent:2em;background-color:#FFFFFF;">

在日常写项目的时候不管是大到后台的系统管理,还是小到一个宣传的单页,我都会先拿来分析一下再去着手制作(PS: 刚上班的时候有项目来就赶紧写,从来不把整个需求看完,结果就是全部从写,所以磨刀不误砍柴工,把我的惨痛经验送给初学者们)。

</p>
<p style="box-sizing:border-box;margin-top:10px;margin-bottom:10px;color:#555555;line-height:25px;white-space:normal;list-style-type:none;font-stretch:normal;font-size:14px;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-indent:2em;background-color:#FFFFFF;">

下面我们一起来分析一下这个动画的思路

</p>

  • 看图片我们知道这个是一个旋转动画所以我们会用到<span style="box-sizing:border-box;color:#FF6600;"> </span>CSS3 transform
  • 所有行星旋转围绕的中心都是太阳,而默认的都是自己的重心但是这里我们需要都是太阳 transform-origin<span style="box-sizing:border-box;color:#FF6600;"> (这个是重点)</span>
  • <span style="box-sizing:border-box;color:#FF6600;">@keyframes rotation </span>这个就是最后一步,当布局完成我们就可以加上动画了

<h2 style="box-sizing:border-box;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:normal;color:#555555;margin:20px -20px 20px -24px;font-size:18px;padding:10px 20px 9px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#EAEAEA;white-space:normal;font-stretch:normal;border-left-color:#428BCA;border-left-width:4px;border-left-style:solid;text-rendering:optimizeLegibility;background-color:#FBFBFB;">

<span style="box-sizing:border-box;color:#339966;">第二、太阳系的HTML</span> 

</h2>
<p style="box-sizing:border-box;margin-top:10px;margin-bottom:10px;color:#555555;line-height:25px;white-space:normal;list-style-type:none;font-stretch:normal;font-size:14px;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-indent:2em;background-color:#FFFFFF;">

接下来讨论太阳系的制作,跟上面不同的地方是行星是围绕着太阳转的,而轮子是围绕着自己的圆心转的,也就是说他们转的基点不同。可以看出,transform的基点默认是本身的中心center,所以我们要改变行星的进行转换的中心点transform-origin。太阳系的html结构如下:

</p>
<p style="box-sizing:border-box;margin-top:10px;margin-bottom:10px;color:#555555;line-height:25px;white-space:normal;list-style-type:none;font-stretch:normal;font-size:14px;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-indent:2em;background-color:#FFFFFF;">

<span style="box-sizing:border-box;color:#FF0000;">class为 *-mercury-track 是行星的运行轨道</span> 

</p>

<div class="galaxy">
    <div class='sun'></div>
    <div class='mercury-track'></div>
    <div class='mercury'></div>
    <div class='venus-track'></div>
    <div class='venus'></div>
    <div class='earth-track'></div>
    <div class='earth'></div>
    <div class='mars-track'></div>
    <div class='mars'></div>
    <div class='jupiter-track'></div>
    <div class='jupiter'></div>
    <div class='saturn-track'></div>
    <div class='saturn'></div>
    <div class='uranus-track'></div>
    <div class='uranus'></div>
    <div class='pluto-track'></div>
    <div class='pluto'></div>
</div>

<p style="box-sizing:border-box;margin-top:10px;margin-bottom:10px;color:#555555;line-height:25px;white-space:normal;list-style-type:none;font-stretch:normal;font-size:14px;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-indent:2em;background-color:#FFFFFF;">

太阳位于div galaxy的中间,让其它行星位于太阳的右边排成一条线。设置galaxy的width和height都为1300px。sun图片的大小为100px*100px,所以sun的left值和top值都为(1300 – 100) / 2 = 600px,这样sun就位于中间位置。设置水星mercury的left值为700px,top为625px,这样水星就位于太阳偏右的位置。然后再设置transform-origin:

</p>

transform-origin: -50px 25px;
<p style="box-sizing:border-box;margin-top:10px;margin-bottom:10px;color:#555555;line-height:25px;white-space:normal;list-style-type:none;font-stretch:normal;font-size:14px;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-indent:2em;background-color:#FFFFFF;"> transform-origin的原点是作用的元素左上角位置,所以往左移(700 – 1300 / 2) = 50px,往下移60 / 2 = 30px(60为水星高度),水星转换的基点就变成了太阳的中心,在此基础上进行旋转: </p>
animation: rotation 2.4s linear infinite;
@keyframes rotation{
    to{
        transform: rotate(1turn);
    }
}

<p style="box-sizing:border-box;margin-top:10px;margin-bottom:10px;color:#555555;line-height:25px;white-space:normal;list-style-type:none;font-stretch:normal;font-size:14px;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-indent:2em;background-color:#FFFFFF;">

其它的行星,也按照这种方法进行设置,计算稍微繁琐。公转的周期以地球10s为基准,其它按比例换算。这样就可以做出一个太阳系公转的图,原理很简单,效果却很好.

</p>
<p style="box-sizing:border-box;margin-top:0px;margin-bottom:18px;color:#555555;font-family:'Microsoft Yahei';font-size:15px;line-height:25px;white-space:normal;background-color:#FFFFFF;">

已经写好的演示源码下载:

</p>
<span class="attachment">201607125362541480128.zip</span>
<p>

<br />

</p>
<p style="box-sizing:border-box;margin-top:10px;margin-bottom:10px;color:#555555;line-height:25px;white-space:normal;list-style-type:none;font-stretch:normal;font-size:14px;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-indent:2em;background-color:#FFFFFF;">

<br />

</p>
<p style="box-sizing:border-box;margin-top:10px;margin-bottom:10px;color:#555555;line-height:25px;white-space:normal;list-style-type:none;font-stretch:normal;font-size:14px;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-indent:2em;background-color:#FFFFFF;">

转载自夏久梦博客

</p>
<p style="box-sizing:border-box;margin-top:10px;margin-bottom:10px;color:#555555;line-height:25px;white-space:normal;list-style-type:none;font-stretch:normal;font-size:14px;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-indent:2em;background-color:#FFFFFF;">

<br />

</p>
<p style="box-sizing:border-box;margin-top:10px;margin-bottom:10px;color:#555555;line-height:25px;white-space:normal;list-style-type:none;font-stretch:normal;font-size:14px;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-indent:2em;background-color:#FFFFFF;">

<br />

</p>
<p style="box-sizing:border-box;margin-top:10px;margin-bottom:10px;color:#555555;line-height:25px;white-space:normal;list-style-type:none;font-stretch:normal;font-size:14px;font-family:arial, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-indent:2em;background-color:#FFFFFF;">

<br />

</p>

最后修改:2019 年 09 月 20 日 09 : 50 AM