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. 左边图标右边文字，在div里居中

  2. CSRF攻击原理以及防御

    一.CSRF是什么? CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写为:CSR ...

  3. javaSE之Object及hashcode等相关知识

    object: package javaBasic; public class TestObject { public static void main(String[] args) { // TOD ...

  4. MFC编程入门之十五（对话框：一般属性页对话框的创建及显示）

    属性页对话框包括向导对话框和一般属性页对话框两类,上一节讲了如何创建并显示向导对话框,本节将继续介绍一般属性页对话框的创建和显示. 实际上,一般属性页对话框的创建和显示过程和向导对话框是很类似的.将上 ...

  5. D3.js 做一个简单的图表（条形图）

    柱形图是一种最简单的可视化图标,主要有矩形.文字标签.坐标轴组成. 本文为简单起见,只绘制矩形的部分,用以讲解如何使用 D3 在 SVG 画布中绘图. 一. 画布是什么 前几章的处理对象都是 HTML ...

  6. POI导出excel的简单demo

    目前使用过两种导出excel的方式,一种是如题所示的使用POI的方式进行数据的导出,这种方式一般只有在处理比较多的数据或者说需要导出的excel表格中有图片之类的需要特殊处理的文件的时候使用:还有一种 ...

  7. Android显示基础--单位与尺寸

    px:是像素的意思,屏幕可以显示的最小元素单位,单独一个像素点非常小,肉眼都无法看到. pt:是磅数的意思,1磅等于七十二分之一英寸,pt一般用作字体的单位. dp:密度无关像素的意思,也被称为dip ...

  8. APP自动化测试中Monkey和 MonkeyRunner

    在设计了测试用例并通过评审之后,由测试人员根据测试用例中描述的规程步步执行测试,得到实际结果与期望结果的比较.在此过程中,为了节省人力.时间或硬件资源,提高测试效率,便引入了自动化测试的概念.自动化测 ...

  9. laravel 中 与前端的一些事5 之解决缓存问题:version

    Version的主要目的就是解决浏览器的缓存问题,在这个方面,Elixir给出的解决方案很完美 应用场景:当我们的css或者js重新更新了,我们需要告诉浏览器我们不要缓存的css或js静态文件样式时, ...

  10. ROS 使用自带和usb摄像头获取图像

    笔记本自带的摄像头的设备号一般为/dev/video0 第一步:安装Webcam 驱动 $ sudo apt-get install git-core $ cd ~/catkin_ws/src $ g ...