zoukankan      html  css  js  c++  java
  • hmtl初学

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

    <!DOCTYPE html>
      <html>
      <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <style>
      .car{
      200px;
      height: 100px;
      border: 1px solid #000;
      position: relative;
      -webkit-animation: moveCar linear 5s forwards;
      }
      .wheel1,.wheel2{
      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{
      50px;
      height: 50px;
      border-radius: 50%;
      border: 1px solid #000;
      -webkit-animation: moveWheel linear 2s 3;
      }
      .testWheel .zhou{
      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>
  • 相关阅读:
    搜索条件中的模式匹配,及包含关键字条件匹配
    Makefile用法,详细到让人吐。
    循序渐进实现仿QQ界面(三):界面调色与控件自绘
    VC 多线程编程
    用UDL快速生成一个数据库连接字符串。
    VC CMarkup所有方法说明
    VC判断控件是否按钮。
    学习笔记(一)
    libvirt0.8.2安装(方法一)
    centos中kvm网桥的设置
  • 原文地址:https://www.cnblogs.com/liaolei1/p/5399767.html
Copyright © 2011-2022 走看看