跳动的小球
2017-12-31 本文已影响0人
前端大飞
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;
}
<body>
<div class="ball"></div>
</body>
基础知识复习
- 线性渐变linear-gradient语法为（[<angle> | to <side-or-corner>, color-stop)
其中第一个参数可以为角度0deg，90deg等，也可以为方向，如to right； 第二个参数为颜色以及颜色的位置，如 blue 450px；
特别注意的是，上述实例的效果，通过skyblue，yellow green 0，两个0点的颜色,中间一个white过渡色，形成上述的水平线效果。 - 缓动的小球。
缓动曲线默认有ease， ease in，ease out， ease in out，linear。
具体缓动函数相关的贝赛尔曲线，我会在下一篇文章中介绍，这里直介绍这里的关键点，通过将将控制锚点的水平坐标和垂直坐标互换，形成相反的效果。从而，产生不一样的缓动函数效果，也就是，小球的跳动效果，降下时加速，弹起来时降速。
