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; }
  • 相关阅读:
    团队绩效打分
    软件对标分析
    目前校园百晓生APP与CSDN软件的对比
    Alpha版
    团队项目第一阶段成果展示
    意见汇总
    团队第一阶段冲刺评价
    冲刺(十)
    【WPF学习】第五十八章 理解逻辑树和可视化树
    【WPF学习】第五十七章 使用代码创建故事板
  • 原文地址:https://www.cnblogs.com/xyangs/p/4278688.html
Copyright © 2011-2022 走看看