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>
  • 相关阅读:
    Shell,Bash,等脚本学习(有区别)
    nfs 服务器
    awk的简单使用
    GPRS研究(3):NO CARRIER错误的含义解释
    信号量
    Linux 的多线程编程的高效开发经验
    getaddrinfo()函数详解
    iOS 知识点
    UITableView拉伸效果
    在Xcode中使用Git进行源码版本控制
  • 原文地址:https://www.cnblogs.com/liaolei1/p/5399767.html
Copyright © 2011-2022 走看看