zoukankan      html  css  js  c++  java
  • 动画练习-360度旋转-animation

    animation
    也是css3属性的一员

    animation: name duration timing-function delay iteration-count direction;
    包括:
    动画名,
    完成一次动画所需要的时间,
    动画速度函数(linear,ease等),
    动画开始之前的延时,
    动画执行的次数(默认是1,常用inifite)
    规定是否应该轮流反向播放动画。(默认是normal,alternate代表完成动画一次需要返回去一次)

    //必须要的两个属性,即动画名和完成动画所需要的时间
    animation: name duration;

    360度旋转小案例

    html
    <img src="T001.jpg" />
    
    css
    img {
    border-radius: 50%;
    animation: rotateArround 3.5s linear 3s infinite alternate;
    -webkit-animation: rotateArround 3.5s linear 3s infinite alternate;
    -moz-animation: rotateArround 3.5s linear 3s infinite;
    -ms-animation: rotateArround 3.5s linear 3s infinite;
    -o-animation: rotateArround 3.5s linear 3s infinite;
    }
    
    @keyframes rotateArround {
    from {transform: rotateZ(0deg);}
    to {transform: rotateZ(360deg);}
    }
    
    @-webkit-keyframes rotateArround {
    from {-webkit-transform: rotate(0deg);
    }
    to {-webkit-transform: rotate(360deg);}
    }
    
    @-moz-keyframes rotateArround {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
    }
    
    @-ms-keyframes rotateArround {
    from {-ms-transform: rotate(0deg);}
    to {-ms-transform: rotate(360deg);}
    }
    
    @-o-keyframes rotateArround {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(360deg);}
    }
    

      

    ————————————————
    版权声明:本文为CSDN博主「Baby_加油_」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/qq_34664239/article/details/83000748

  • 相关阅读:
    go 接收发送文件
    【0031】反转整数/判断回文
    【003】链表或字符串的【反转】【左旋转】
    【002】链表或字符串模拟加法/加一/乘法
    【01】数组中只出现一次的数字
    【面试题050】树中两个结点的最低公共祖先
    【面试题049】把字符串转换成整数
    【面试题048】不能继承的类
    【面试题047】不用加减乘除做加法
    【面试题046】求1+2+...+n
  • 原文地址:https://www.cnblogs.com/beimingbingpo/p/11457842.html
Copyright © 2011-2022 走看看