CSS3 2D模拟实现摩天轮旋转效果


Posted in HTML / CSS onNovember 16, 2016

先看效果图:

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 属性允许您改变被转换元素的位置。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
如何查看浏览器对html5的支持情况
Dec 15 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 #HTML / CSS
CSS3 box-sizing属性详解
Nov 15 #HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 #HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 #HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 #HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 #HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 #HTML / CSS
You might like
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
PHP执行速率优化技巧小结
2008/03/15 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
php设计模式之单例模式代码
2016/06/11 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
JS实现self的resend
2010/07/22 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
document.write的几点使用心得
2014/05/14 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
django用户登录验证的完整示例代码
2019/07/21 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
教师业务学习制度
2014/01/25 职场文书
债务追讨律师函
2015/06/24 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server