CSS3动画实践——简易牛顿摆
程序员文章站
2022-07-11 17:16:56
实现起来并不复杂,只需对最左和最右的小球进行关键帧动画处理,同时注意应该将绳子与小球作为一个整体,以左边小球为例: .left-ball.ball-wrapper { transform-origin: center top; animation: left-ball-swing 4s 0s inf ......
最近在练习css3的关键帧动画(keyframes),于是做了一个简单的牛顿摆(听名字可能陌生,但你一定见过它):
先上代码(老版本ie可能存在兼容性问题):
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <style> html, body { height: 100%; margin: 0px; padding: 0px; } .main-container { display: flex; justify-content: center; align-items: center; height: 100%; background-color: #d7c8d0; } .swing-container { width: 500px; height: 400px; display: flex; flex-wrap: wrap; } .roof { width: 100%; height: 20px; background-color: #18619b; } .ball-wrapper { flex-basis: 100px; height: 380px; display: flex; align-items: center; flex-direction: column; } .ball { height: 100px; width: 100px; text-align: center; line-height: 90px; border-radius: 50px; background-color: #edcb66; } .rope { background: black; width: 2px; height: 280px; } .left-ball.ball-wrapper { transform-origin: center top; animation: left-ball-swing 4s 0s infinite normal; } .right-ball.ball-wrapper { transform-origin: center top; animation: right-ball-swing 4s 2s infinite normal; } @keyframes left-ball-swing { 0% { transform: rotate(0deg); animation-timing-function: ease-out; } 25% { transform: rotate(90deg); animation-timing-function: ease-in; } 50% { transform: rotate(0deg) } 100% {} } @keyframes right-ball-swing { 0% { transform: rotate(0deg); animation-timing-function: ease-out; } 25% { transform: rotate(-90deg); animation-timing-function: ease-in; } 50% { transform: rotate(0deg) } 100% {} } </style> </head> <body> <div class="main-container"> <div class="swing-container"> <div class="roof"> </div> <div class="left-ball ball-wrapper"> <div class="rope"></div> <div class="ball">快</div> </div> <div class="ball-wrapper"> <div class="rope"></div> <div class="ball">点</div> </div> <div class="ball-wrapper"> <div class="rope"></div> <div class="ball">去</div> </div> <div class="ball-wrapper"> <div class="rope"></div> <div class="ball">看</div> </div> <div class="right-ball ball-wrapper"> <div class="rope"></div> <div class="ball">书</div> </div> </div> </div> </body> </html>
实现起来并不复杂,只需对最左和最右的小球进行关键帧动画处理,同时注意应该将绳子与小球作为一个整体,以左边小球为例:
.left-ball.ball-wrapper { transform-origin: center top; animation: left-ball-swing 4s 0s infinite normal; } @keyframes left-ball-swing { 0% { transform: rotate(0deg); animation-timing-function: ease-out; } 25% { transform: rotate(90deg); animation-timing-function: ease-in; } 50% { transform: rotate(0deg) } 100% {} }
以绳子的起点为圆心,摆动共4秒:
0%--25%(第一秒): 顺时针旋转90度,速度为ease-out(逐渐变缓,因为动能转化为势能到了最高点速度为0)
25%--50%(第二秒): 返回到0度,即逆时针旋转了90度,速度为ease-in,势能变为动能
50%--100%(后两秒):不做变化(这两秒是右边小球在摆动)
that'it,最后来看效果图:
感谢阅读,o(* ̄▽ ̄*)o
原创文章,转载请注明出处。
下一篇: 关于两个DIV之间的空白字符