zoukankan      html  css  js  c++  java
  • 最简化模型2——css3分阶段动画效果(经过实测)之转动的div

    @keyframes mymove{
        0%{top: 0;left: 0;transform:rotate(50deg);}
        10%{top: 100px;left: 50px;transform:rotate(80deg);}
        20%{top: 300px;left: 40px;transform:rotate(-50deg);}
        30%{top: 400px;left: 200px;transform:rotate(150deg);}
        40%{top: 700px;left: 300px;transform:rotate(350deg);}
        100%{top: 200px;left: 50px;transform:rotate(160deg);}
    }
    .circle{ 200px;height: 150px;background: olive;margin: 0 auto;position: relative;}
    .circle{
        -webkit-animation: mymove 5s ;
        -o-animation: mymove 5s ;
        animation: mymove 5s ;
    }

     注意:要运动起来很多时候要给动画元素一个相对定位属性才能动起来,如果不加position:relative;属性,则left和top等位移属性值将没有效果

    <div class="circle"></div>

  • 相关阅读:
    平时十二测
    无题十四
    暑假第十测
    无题十三
    noip错题集
    无题十二
    BZOJ整理
    志愿者招募
    修车
    任务安排
  • 原文地址:https://www.cnblogs.com/koleyang/p/5477831.html
Copyright © 2011-2022 走看看