跳动的小球

2018年写点Css

2018年的关键次是涅槃，Css每天写一点，开开心心过大年！

跳动的小球

今天的实例是，《CSS揭秘》的第42小节缓动效果的自由落体模拟跳动的小球。

效果演示

跳动的小球

核心代码。

    @keyframes bounce {
      60%, 80%, to { transform: translateY(400px); animation-timing-function: ease}
      70% { transform: translateY(300px);}
      90% { transform: translateY(360px);}
    }
    .ball {
      width: 0;
      height: 0;
      padding: 1.5em;
        border-radius: 50%;
        margin: auto;
        background: red radial-gradient(at 30% 30%, #fdd, red);
        animation: bounce 2s cubic-bezier(.1,.25,1,.25) forwards;
    }
    body {
      background: linear-gradient(skyblue, white 450px, yellowgreen 0);
      min-height: 100vh; 
    }
    
      

    

基础知识复习

1. 线性渐变linear-gradient语法为（[ | to , color-stop)
   其中第一个参数可以为角度0deg，90deg等，也可以为方向，如to right； 第二个参数为颜色以及颜色的位置，如 blue 450px；
   特别注意的是，上述实例的效果，通过skyblue，yellow green 0，两个0点的颜色,中间一个white过渡色，形成上述的水平线效果。
2. 缓动的小球。
   缓动曲线默认有ease， ease in，ease out， ease in out，linear。
   具体缓动函数相关的贝赛尔曲线，我会在下一篇文章中介绍，这里直介绍这里的关键点，通过将将控制锚点的水平坐标和垂直坐标互换，形成相反的效果。从而，产生不一样的缓动函数效果，也就是，小球的跳动效果，降下时加速，弹起来时降速。