编程 HTML / CSS

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

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

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

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

- Author -

csdn9_14

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

CSS3 icon font完全指南(CSS3 font 会取代icon图标)

Jan 06 HTML / CSS

浅析CSS3中鲜为人知的属性：-webkit-tap-highlight-color

Jan 12 HTML / CSS

使用CSS3来代替JS实现交互

Aug 10 HTML / CSS

详解css position 5种不同的值的用法

Jul 30 HTML / CSS

css3 利用transform打造走动的2D时钟

Oct 20 HTML / CSS

css3实现简单的白云飘动背景特效

Oct 28 HTML / CSS

canvas烟花特效锦集

Jan 17 HTML / CSS

详解如何用canvas画一个微笑的表情

Mar 14 HTML / CSS

会走动的图形html5时钟示例

Apr 27 HTML / CSS

深入剖析HTML5 内联框架iFrame

May 04 HTML / CSS

h5页面背景图很长要有滚动条滑动效果的实现

Jan 27 HTML / CSS

html+css实现赛博朋克风格按钮

May 26 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

一个捕获函数输出的函数

2007/02/14 PHP

使用PHP Socket写的POP3类

2013/10/30 PHP

如何解决PHP获取不到SESSION信息之一般情况

2019/10/10 PHP

验证手机号码的JS方法分享

2013/09/10 Javascript

js面向对象编程之如何实现方法重载

2014/07/02 Javascript

$.extend 的一个小问题

2015/06/18 Javascript

JavaScript中eval()函数用法详解

2015/12/14 Javascript

JS简单获取客户端IP地址的方法【调用搜狐接口】

2016/09/05 Javascript

JavaScript实现通过select标签跳转网页的方法

2016/09/29 Javascript

js 简易版滚动条实例(适用于移动端H5开发)

2017/06/26 Javascript

微信小程序实现日历效果

2018/12/28 Javascript

vue生命周期的探索

2019/04/03 Javascript

JavaScript实现多个物体同时运动

2020/03/12 Javascript

[19:15]DK战队纪录片

2014/09/02 DOTA

[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22

2018/08/23 DOTA

python制作花瓣网美女图片爬虫

2015/10/28 Python

python删除服务器文件代码示例

2018/02/09 Python

Python中的CSV文件使用"with"语句的方式详解

2018/10/16 Python

tensorflow实现训练变量checkpoint的保存与读取

2020/02/10 Python

浅谈python元素如何去重,去重后如何保持原来元素的顺序不变

2020/02/28 Python

Python猜数字算法题详解

2020/03/01 Python

Python如何用filter函数筛选数据

2020/03/05 Python

Pyqt5 关于流式布局和滚动条的综合使用示例代码

2020/03/24 Python

Python的scikit-image模块实例讲解

2020/12/30 Python

五分钟学会怎么用Pygame做一个简单的贪吃蛇

2021/01/06 Python

matplotlib绘制多子图共享鼠标光标的方法示例

2021/01/08 Python

Python+MySQL随机试卷及答案生成程序的示例代码

2021/02/01 Python

使用HTML5加载音频和视频的实现代码

2020/11/30 HTML / CSS

李维斯法国官网：Levi’s法国

2019/07/13 全球购物

Myprotein西班牙官网：欧洲第一大运动营养品牌

2020/02/24 全球购物

大学毕业生简单自荐信

2013/11/05 职场文书

销售顾问的岗位职责

2013/11/13 职场文书

九年级数学教学反思

2014/02/02 职场文书

学校百日安全生产活动总结

2014/07/05 职场文书

教师学期末个人总结

2015/02/13 职场文书

二年级作文之动物作文

2019/11/13 职场文书