继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

用CSS3 animation模拟摩天轮旋转动画效果

浔阳月夜丶
关注TA
已关注
手记 8
粉丝 38
获赞 703

这次我们来实现一个简单又很有意思的动画效果,完全由CSS 的animation来实现,素材和源码来自于其他网站,个人对源码做了一些改动优化
完成后的效果——旋转效果 (github pages打开特别慢,要等一下)
主要的方法由三步组成:
1、让背景图片在十秒内完成360度旋转,模拟出摩天轮的旋转效果;
2、将三张人物图片定位在背景图上,随背景转动;
3、为三张图片额外创建一个animation,让人物图片在十秒内逆时针旋转360度,这样人物图自始至终都是垂直于水平线。
HTML代码:

<div class="container">
    <img src="images/background.png">
    <img src="images/person1.png">
    <img src="images/person2.png">
    <img src="images/person3.png">
</div>

第一步代码:

div.container{
    margin: 100px auto;
    width: 800px;
    position: relative;
    -webkit-animation: rotate 10s infinite linear;
    -o-animation: rotate 10s infinite linear;
    animation: rotate 10s infinite linear;
}
@keyframes rotate{
    0%{
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    }
}

原本作者的代码是为背景设定一个1000s的动画,然后在动画时效内旋转36000度,这样同样可以实现动画。这个设定很巧妙,但是缺点很明显,在1000s后动画就停了,一般这种动画多用在网站的背景上面,所以很显然这个办法不可取,而且这种方法到了后面动画会越转越快……不知道是什么原因,有懂的同学可有告诉我下。
解决的办法很简单,animation是有infinite属性的,设置以后,动画就会无限循环下去,后面的人物图逆时针旋转也是这样设置。

第二步代码:

img:nth-child(2){
    position: absolute;
    top: 80px;
    left: 400px;
    animation: re-rotate 10s infinite linear;
    -webkit-animation: re-rotate 10s infinite linear;
    -moz-animation: re-rotate 10s infinite linear;
    transform-origin:top center;
    -webkit-transform-origin:top center;
    -moz-transform-origin:top center;
}
img:nth-child(3){
    position: absolute;
    top: 700px;
    left: 400px;
    animation: re-rotate 10s infinite linear;
    -webkit-animation: re-rotate 10s infinite linear;
    -moz-animation: re-rotate 10s infinite linear;  
    transform-origin:top center;
    -webkit-transform-origin:top center;
    -moz-transform-origin:top center;
}
img:nth-child(4){
    position: absolute;
    top: 300px;
    left: 0px;
    animation: re-rotate 10s infinite linear;
    -webkit-animation: re-rotate 10s infinite linear;
    -moz-animation: re-rotate 10s infinite linear;
    transform-origin:top center;
    -webkit-transform-origin:top center;
    -moz-transform-origin:top center;
}

这部分很简单,没什么好说的,就是兼容问题写了一堆代码,看起来有点烦。
第三步代码:

@keyframes re-rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(-360deg);
    }
}

第三步和上面的一样,设置动画的百分比,如果想控制旋转的速度,可以在keyframes里面具体设置。
以上,就是这个动画的全部代码,很简单,但是很有意思,类似的动画可以用在很多地方,分享给大家。

打开App,阅读手记
7人推荐
发表评论
随时随地看视频慕课网APP