CSS3中2D模拟实现摩天轮旋转效果的示例分析

发布时间:2021-06-29 11:46:04 作者:小新
来源:亿速云 阅读:215

这篇文章给大家分享的是有关CSS3中2D模拟实现摩天轮旋转效果的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

先看效果图:

CSS3中2D模拟实现摩天轮旋转效果的示例分析

由于上传的大小原因,只能录制成这种效果,原图是无限循环的转圈。

代码:

<span style="font-size:18px;"><!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <title>模拟摩天轮动画</title>  
    <style>  
    *{margin:0;padding:0;}  
    .image{width:80px;height:80px;}  
    .image1{width:620px;height:620px;}  
    .div1{position:relative;margin:10px auto;width:638px;  
            animation:run 20s linear infinite;  
            -webkit-animation:run 20s linear infinite;  
            -moz-animation:run 20s linear infinite;  
            -o-animation:run 20s linear infinite;  
        }  
    img:nth-child(2){  
            position:absolute;top:25px;left:270px;opacity:0.7;  
            animation:run2 20s linear infinite;  
            -webkit-animation:run2 20s linear infinite;  
            -moz-animation:run2 20s linear infinite;  
            -o-animation:run2 20s linear infinite;  
            transform-origin:top center;  
            -webkit-transform-origin:top center;  
            -moz-transform-origin:top center;  
            -o-transform-origin:top center;  
        }  
        img:nth-child(3){  
            position:absolute;top:580px;left:270px;opacity:0.7;  
            animation:run2 20s linear infinite;  
            -webkit-animation:run2 20s linear infinite;  
            -moz-animation:run2 20s linear infinite;  
            -o-animation:run2 20s linear infinite;  
            transform-origin:top center;  
            -webkit-transform-origin:top center;  
            -moz-transform-origin:top center;  
            -o-transform-origin:top center;  
        }  
        img:nth-child(4){  
            position:absolute;top:300px;left:550px;opacity:0.7;  
            animation:run2 20s linear infinite;  
            -webkit-animation:run2 20s linear infinite;  
            -moz-animation:run2 20s linear infinite;  
            -o-animation:run2 20s linear infinite;  
            transform-origin:top center;  
            -webkit-transform-origin:top center;  
            -moz-transform-origin:top center;  
            -o-transform-origin:top center;  
        }  
        img:nth-child(5){  
            position:absolute;top:300px;left:0px;opacity:0.7;  
            animation:run2 20s linear infinite;  
            -webkit-animation:run2 20s linear infinite;  
            -moz-animation:run2 20s linear infinite;  
            -o-animation:run2 20s linear infinite;  
            transform-origin:top center;  
            -webkit-transform-origin:top center;  
            -moz-transform-origin:top center;  
            -o-transform-origin:top center;  
        }  
        @keyframes run  
        {  
            0%{transform:rotate(0deg)}  
            100%{transform:rotate(360deg)}    
        }  
        @-webkit-keyframes run  
        {  
            0%{-webkit-transform:rotate(0deg)}  
            100%{-webkit-transform:rotate(360deg)}    
        }  
        @-moz-keyframes run  
        {  
            0%{-moz-transform:rotate(0deg)}  
            100%{-moz-transform:rotate(360deg)}   
        }  
        @-o-keyframes run  
        {  
            0%{-o-transform:rotate(0deg)}  
            100%{-o-transform:rotate(360deg)}     
        }  
          
        @keyframes run2  
        {  
            0%{transform:rotate(0deg)}  
            100%{transform:rotate(-360deg)}   
        }  
        @-webkit-keyframes run2  
        {  
            0%{-webkit-transform:rotate(0deg)}  
            100%{-webkit-transform:rotate(-360deg)}   
        }  
        @-moz-keyframes run2  
        {  
            0%{-moz-transform:rotate(0deg)}  
            100%{-moz-transform:rotate(-360deg)}      
        }  
        @-o-keyframes run2  
        {  
            0%{-o-transform:rotate(0deg)}  
            100%{-o-transform:rotate(-360deg)}    
        }  
    </style>  
</head>  
<body>  
    <div class="div1">  
        <img src="1.png" class="image1">  
        <img src="1.jpg" class="image">  
        <img src="2.jpg" class="image">  
        <img src="3.jpg" class="image">  
        <img src="4.jpg" class="image">   
          
    </div>  
</body>  
</html></span>

 摩天轮原图:

CSS3中2D模拟实现摩天轮旋转效果的示例分析

注释:transform-origin 属性允许您改变被转换元素的位置。

这个属性主要的作用就是选择一个位置,然后绕着这个位置旋转。

感谢各位的阅读!关于“CSS3中2D模拟实现摩天轮旋转效果的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. css3如何让图片实现不停旋转的效果
  2. 如何用CSS3实现元素旋转效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3

上一篇:php怎么判断电子邮件是否正确

下一篇:Automation服务器不能创建对象怎么解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》