用css3实现摩天轮旋转的动画效果

1.CSS3 @keyframes 规则
如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
2.什么是 CSS3 中的动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器

3.摩天轮旋转动画的下实现过程

  • 分析摩天轮的构造,有静止部分和非静止部分,我把静止与非静止分别加在两个div中。
  • 创建静止部分div并导入图片如图下:
  • 创建非静止部分div并导入图片如图下:
  • 加入背景
  • 给静止图调至适当位置并设置层级
  • 分析动图中大转盘顺时针转动,人物要相对与地面始终垂直则人物要逆时针旋转同一角度
  • 给大转轮加入动画并旋转

  • 给人物加入动画旋转角度为逆时针

  • 实现效果图

    4.实现心得
  • 在效果实现中简单运用了@keyframes 规则,简单使用动画 animation 属性进行创建动画,对于我这个只学习了两个多星期的小白来说能简单实现这样的动画已经很不错了嘿嘿/>.<//! 也希望在逆战班能继续不断的努力学习!加油吧

用css3实现摩天轮旋转的动画效果的更多相关文章

  1. 用CSS3制作50个超棒动画效果教程

    这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...

  2. 纯css3圆形从中心向四周扩散动画效果

    查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...

  3. Magic CSS3 – 创建各种神奇的交互动画效果

    Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中.只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 ma ...

  4. 一款纯css3实现的机器人看书动画效果

    今天要给大家介绍一款纯css3实现的机器人看书动画效果.整个画面完全由css3实现的绘制,没有使用任何图片元素.机器人的眼睛使用了动画元素.我们一起看下效果图: 在线预览   源码下载 实现的代码. ...

  5. CSS3实现的图片加载动画效果

    来源:GBin1.com 使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强! HTML <ul class="grid effect- ...

  6. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  7. CSS3轻松实现彩色旋转六面体动画

    一.效果预览: 二.基本思路: 1.首先这个一个自动触发的动画,因此应使用animation设计,包括自动组装和组装完成后自动旋转的过程: 2.当鼠标放上去的时候六个面及上面的字体均变色,应在六个面设 ...

  8. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  9. css3实现的3中loading动画效果

    一.css3中animation动画各种属性详解: animation Value:     [<animation-name> || <animation-duration> ...

随机推荐

  1. LeetCode:两数之和、三数之和、四数之和

    LeetCode:两数之和.三数之和.四数之和 多数之和问题,利用哈希集合减少时间复杂度以及多指针收缩窗口的巧妙解法 No.1 两数之和 给定一个整数数组 nums 和一个目标值 target,请你在 ...

  2. 总结:利用asp.net core日志进行生产环境下的错误排查(asp.net core version 2.2,用IIS做服务器)

    概述 调试asp.net core程序时,在输出窗口中,在输出来源选择“调试”或“xxx-ASP.NET Core Web服务器”时,可以看到类似“info:Microsoft.AspNetCore. ...

  3. MongoDB Compass最新版(v_1.20.5)远程连接数据库

    最近下载了最新版本的MongoDB Compass(v_1.20.5)后才发现软件较之前的版本有了很大的变化,主要体现在创建连接页面和连接方式上. 这是旧版的连接页面,所有的参数项以表单的形式列出,直 ...

  4. Javascript中的Math.max()和Math.min()

    Math.max()是求最大值,Math.min()是求最小值 Math.max(value1,value2,value3....) 但是如果是数组或者对象呢? var numArr = [1,2,4 ...

  5. 群ping

    找出单位内所有电脑手机 通常情况下,ping只能ping一个IP地址.一个网络值班只有255台电脑,除非是大的网络断,把子网掩码改了,可以扩充更多电脑.如: 如果我们要一次性检查内网所有机器,则可以输 ...

  6. Oracle 11g rac开启归档

    Oracle 11g rac开启归档 查看目前归档状态 #节点1 ykws1 SQL> archive log list; Database log mode No Archive Mode A ...

  7. Java集合03——你不得不了解的Map

    Map 在面试中永远是一个绕不开的点,本文将详细讲解Map的相关内容.关注公众号「Java面典」了解更多 Java 知识点. Map Map 是一个键值对(key-value)映射接口: 映射中不能包 ...

  8. table 上下左右 4根线的写法 :before :after 他们就能把td里面右下的那颗线给盖上 还有body和header横向滚动的联动 || 不能把body套在header上是为了上header表头固定 || 还有表头header的右侧overflow-y 是否出现滚动条的位置 记得有一个$nextTick 要不然会获取不到高度 高度就为0了 || 横向滚动条纵向滚动条

    table 上下左右 4根线的写法 <!--* @description 重点查核人员表!--><template> <div class="keyChecke ...

  9. LeetCode43,一题让你学会高精度算法

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode系列第22篇文章,今天讲的内容是高精度算法. 今天和大家讨论的算法是高精度,对应的LeetCode是第43题.题面其实 ...

  10. Linux软件安装之JDK的安装

    JDK的安装 1.1. 下载JDK,此处版本是1.8u131,实际操作以自己具体版本为准 先查看Linux系统是多少位(32位/64位):getconf LONG_BIT 然后去官网下载JDK [jd ...