为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 用CSS3 animation模拟摩天轮旋转动画效果

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

2016.10.07 22:19 10179浏览

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

<div class="container">
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/background.png">
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/person1.png">
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/person2.png">
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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里面具体设置。
以上,就是这个动画的全部代码,很简单,但是很有意思,类似的动画可以用在很多地方,分享给大家。

点击查看更多内容
7人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消