hmtl+css实现小车轮子转动！

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  .car{
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  position: relative;
  -webkit-animation: moveCar linear 5s forwards;
  }
  .wheel1,.wheel2{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  }
  .wheel1{
  position: absolute;
  left: 10px;
  bottom: -25px;
  }
  .wheel2{
  position: absolute;
  right: 10px;
  bottom: -25px;
  }
  @keyframes moveCar {
  0%{
  position: relative;
  left: 50px;
  -webkit-transform: rotate(0deg);
  }
  20%{
  position: relative;
  left: 100px;
  -webkit-transform: rotate(0deg);
  }
  40%{
  position: relative;
  left: 150px;
  -webkit-transform: rotate(0deg);
  }
  60%{
  position: relative;
  left: 200px;
  -webkit-transform: rotate(0deg);
  }
  80%{
  position: relative;
  left: 250px;
  -webkit-transform: rotate(0deg);
  }
  100%{
  position: relative;
  left: 250px;
  -webkit-transform: rotate(180deg);
  }
  }
   
  /*------*/
  .testWheel{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #000;
  -webkit-animation: moveWheel linear 2s 3;
  }
  .testWheel .zhou{
  width: 100%;
  height: 0;
  border: 1px solid grey;
  position: absolute;
  top: 25px;
  }
  .testWheel .zhou:nth-child(2){
  -webkit-transform: rotate(45deg);
  }
  .testWheel .zhou:nth-child(3){
  -webkit-transform: rotate(90deg);
  }
  .testWheel .zhou:nth-child(4){
  -webkit-transform: rotate(135deg);
  }
  @keyframes moveWheel {
  from{
  -webkit-transform: rotate(0deg);
  }
  to{
  -webkit-transform: rotate(360deg);
  }
  }
  </style>
  </head>
  <body>
  <div class="car">
  秦始皇
  <div class="testWheel wheel1">
  <div class="zhou"></div>
  <div class="zhou"></div>
  <div class="zhou"></div>
  <div class="zhou"></div>
  </div>
  <div class="testWheel wheel2">
  <div class="zhou"></div>
  <div class="zhou"></div>
  <div class="zhou"></div>
  <div class="zhou"></div>
  </div>
  </div>
  </body>
  </html>

hmtl初学的更多相关文章

  1. DDD初学指南

    去年就打算总结一下,结果新换的工作特别忙,就迟迟没有认真动手.主要内容是很多初学DDD甚至于学习很长时间的同学没有弄明白DDD是什么,适合什么情况.这世界上没有银弹,抛开了适合的场景孤立的去研究DDD ...

  2. gulp初学

    原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js  配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...

  3. 初学seaJs模块化开发，利用grunt打包，减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  4. 初学Vue2.0--基础篇

    概述: 鉴于本人初学,使用的编译器是webStorm,需添加对VUE的支持,添加方法可以参考 http://www.jianshu.com/p/142dae4f8b51. 起步: 1. 扎实的 Jav ...

  5. 初学Python

    初学Python 1.Python初识 life is short you need python--龟叔名言 Python是一种简洁优美语法接近自然语言的一种全栈开发语言,由"龟叔&quo ...

  6. Javascript初学篇章_5(对象)

    对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象, ...

  7. 初学Objective-C语言需要了解的星星点点

             其实大多数开发初学者都有一些相同的特点,可以说是一种“职业病”.Most有其他平台开发基础的初学者,看到Xcode就想摩拳擦掌:看到Interface Builder就想跃跃欲试:而 ...

  8. matlab初学之句柄

    文章出处:http://www.cnblogs.com/CBDoctor/archive/2012/04/06/2434072.html 在matlab中,每一个对象都有一个数字来标识,叫做句柄.当每 ...

  9. 初学HTML5、初入前端

    学习HTML5是一个漫长的过程,当中会遇到很多技术与心态上的变化.刚开始学习,我们不能发力过猛,需要一个相对稳定的状态去面对.多关注一些自己感兴趣的网站和技术知识,建立自己的信心与好奇心,为以后的学习 ...

随机推荐

  1. MUMmer 3使用方法

    DNA和核苷酸的快速比对软件包,基于suffix tree 数据结构,快速.图形化.模块可用于其他软件.可进行大基因组比对.多对多基因组比对. The MUMmer Home Page The MUM ...

  2. HTTP状态码及其含义

    下表显示了常见的HTTP 1.1状态代码以及它们对应的状态信息和含义.应当谨慎地使用那些只有HTTP 1.1支持的状态代码,因为许多浏览器还只能够支持HTTP 1.0.如果你使用了HTTP 1.1特有 ...

  3. Eclipse中Java项目转换为Web项目

    刚创建完的Java Project是这样的 右键项目名,找到这个地方 修改下方的 Default output folder 为 Vehicle-Report/WebContent/WEB-INF/c ...

  4. Object.create()兼容实现方法

    if (!Object.create) { Object.create = (function(){ function F(){} return function(o){ if (arguments. ...

  5. 无障碍网页设计（WCAG2.0）

    无障碍化是指无论健全人还是残疾人,年轻人还是老年人都可以平等地获取互联网上的信息和服务.无障碍化网站建设不单可以增加网站的受益群体,更是一个有情怀.有担当的互联网企业的责任,也是一个互联网从业人员应该 ...

  6. Objective－C（内存管理）

    引用计数器 每个OC对象都有一个占4个字节存储空间的引用计数器 当使用或创建一个对象时,新对象的引用计数器默认是1 retain:可以使引用计数器+1 release:可以是引用计数器-1 retai ...

  7. Druid.io索引过程分析——时间窗，列存储，LSM树，充分利用内存，concise压缩

    Druid底层不保存原始数据,而是借鉴了Apache Lucene.Apache Solr以及ElasticSearch等检索引擎的基本做法,对数据按列建立索引,最终转化为Segment,用于存储.查 ...

  8. Thrift编译与验证 - python

    1 编译(保留了C和python语言,简化编译): # ./configure --without-java --without-cpp --without-php --without-erlang ...

  9. Scala HelloWorld

    1) 使用MVN创建项目 mvn archetype:generate -DgroupId=com.mycompany.app -DartifactId=my-app -DarchetypeArtif ...

  10. bzoj 2763: [JLOI2011]飞行路线

    #include<cstdio> #include<cstring> #include<iostream> #include<queue> #defin ...