zoukankan      html  css  js  c++  java
  • css3表钟

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>弧形运动效果</title>
    <style type="text/css">
    body{
    margin:0;
    background:#111;
    text-align:center;
    }
    h1{
    font-size: 14px;
    font-family: "Microsoft Yahei";
    text-align: center;
    }
    .stage{
    120px;
    height:auto;
    margin:0 auto;
    position:relative;
    -webkit-transform-origin:center top;
    -webkit-transform:rotate(-30deg);
    -webkit-animation:sway 2.2s infinite alternate ease-in-out;
    }
    .watch{
    100%;
    height:auto;
    }
    .seconds{
    position:absolute;
    8%;
    height:auto;
    bottom:11.5%;
    left:45.5%;
    -webkit-transform-origin:center 72.4%;
    -webkit-animation:second 60s infinite linear;
    }
    @-webkit-keyframes second{
    to{
    -webkit-transform:rotate(355deg);
    }
    }
    @-webkit-keyframes sway{
    to{
    -webkit-transform:rotate(30deg);
    }
    }
    </style>
    </head>
    <body>
    <h1>请使用webkit内核标准浏览器查看效果</h1>
    <div class="stage">
    <img src="http://p0.qhimg.com/t0197c451833414523e.png" alt="钟表" class="watch"/>
    <img src="http://p9.qhimg.com/t0145f1ae8ad6753b05.png" alt="秒针" class="seconds">
    </div>
    </body>
    </html>

  • 相关阅读:
    TCP四次握手断开连接(十一)
    Go-函数
    Go-数据类型以及变量,常量
    GO语言介绍以及开发环境配置
    Socket与WebSocket以及http与https重新总结
    希尔排序
    第19课
    第18课
    外传篇3 动态内存申请的结果
    外传篇2 函数的异常规格说明
  • 原文地址:https://www.cnblogs.com/liulua/p/6868548.html
Copyright © 2011-2022 走看看