zoukankan      html  css  js  c++  java
  • 使用CSS3动画模拟实现小球自由落体效果

    使用纯CSS代码模拟实现小球自由落体效果:

    html代码如下:

    1 <div id="ballDiv">
    2   <div id="ball"></div>
    3 </div>

    CSS样式代码:

    /*ball样式*/
    #ballDiv{ height:400px; background-color:#333333;}
    #ball{ width:100px; height:100px; border-radius:50%; background:-webkit-radial-gradient(center center,circle,#fff,blue); box-shadow:3px 7px 8px #ccc; -webkit-animation:ball 5s cubic-bezier(0.0,0.25,0.50,1.0); -webkit-transform:translate(250px, 300px);}
    
    @-webkit-keyframes ball
    {
      0%{-webkit-transform:translate(0, 0);}
      10%{-webkit-transform:translate(0, 330px); height:70px;}
      20%{-webkit-transform:translate(50px, 50px); height:100px;}
      30%{-webkit-transform:translate(50px, 330px); height:70px;}
      40%{-webkit-transform:translate(100px, 100px); height:100px;}
      50%{-webkit-transform:translate(100px, 320px); height:80px;}
      60%{-webkit-transform:translate(150px, 150px); height:100px;}
      70%{-webkit-transform:translate(150px, 320px); height:80px;}
      80%{-webkit-transform:translate(200px, 200px); height:100px;}
      90%{-webkit-transform:translate(200px, 300px); height:100px;}
      100%{-webkit-transform:translate(250px, 300px); height:100px;}
    }
  • 相关阅读:
    Java多线程之Wait()和Notify()
    Java多线程之线程结束清理
    Java多线程之阻塞I/O如何中断
    Java多线程之线程中断
    java多线程之计算数量
    深入研究java.lang.ThreadLocal类(转)
    java多线程之ThreadLocal
    java多线程之AtomicInteger
    Java多线程之简单的线程同步实例
    Java多线程之捕获异常
  • 原文地址:https://www.cnblogs.com/grnBlogs/p/4661178.html
Copyright © 2011-2022 走看看