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

  • 相关阅读:
    minikube国内在线部署体验
    分表与分库使用场景以及设计方式
    epool与select有什么区别
    使用ssh-keygen生成私钥和公钥
    mysql关键字冲突
    MySQL 获取当前时间戳
    平时常说的ThreadLocal,今天就彻底解决它
    mysql和mssql最大连接数
    Spring Boot实战:拦截器与过滤器
    Mysql 索引问题-日期索引使用
  • 原文地址:https://www.cnblogs.com/beimingbingpo/p/11457842.html
Copyright © 2011-2022 走看看