zoukankan      html  css  js  c++  java
  • html5关键帧动画,一个小例子快速理解关键帧动画

    1.定义关键帧

    @keyframes zhuanquan
    {
      0% {-webkit-transform: rotate(0);}
      100% {-webkit-transform: rotate(360deg);}
    }
    @-webkit-keyframes zhuanquan/* Safari and Chrome */
    {
      0% {-webkit-transform: rotate(0);}
      100% {-webkit-transform: rotate(360deg);}
    }
    
    @-webkit-keyframes zhuanquan/* Safari and Chrome */
    {
      0% {-webkit-transform: rotate(0);}
      100% {-webkit-transform: rotate(360deg);}
    }
    
    @-moz-keyframes zhuanquan/* Firefox */
    {
    0% {-webkit-transform: rotate(0);}
    100% {-webkit-transform: rotate(360deg);}
    }
    @-moz-keyframes zhuanquan/* Opera*/
    {
    0% {-webkit-transform: rotate(0);}
    100% {-webkit-transform: rotate(360deg);}
    }
     

    2.使用,小圆圆周运动实例

    .xiaoyuan {
                width:213px; height:213px;//滚动范围,半径
           position:absolute;//定位

           top:50%; left:50%;//定位到中间

    -webkit-animation: zhuanquan infinite linear 10s;//调用名称 无穷次调用,循环 均匀线性滚动 -webkit-transform-origin: 0 0;//定义基点位置
    } .xiaoyuan:after {width:20px; height:20px; position:absolute;right: 0;content: "";border-radius:20px;background:#5091c0; }
  • 相关阅读:
    js_未结束的字符串常量
    [转]关于项目管理的思考
    Nhibernate理解
    Visual Studio 2005常用插件搜罗
    基本概念
    resharper 2.0
    Nhibernate资源
    [转]关于项目管理的知识点
    style
    带分数 蓝桥杯
  • 原文地址:https://www.cnblogs.com/xyangs/p/4278688.html
Copyright © 2011-2022 走看看