最近在练习css3的关键帧动画（keyframes），于是做了一个简单的牛顿摆（听名字可能陌生，但你一定见过它）:
先上代码(老版本ie可能存在兼容性问题)：
<!doctype html><html lang="en"><head> <meta chart="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-cont粗盐去黑头ainer { 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: ea-out； } 25% { transform: rotate(90deg); animation-timing-function: ea-in; } 50% { transform: rotate(0deg) } 100% {} } @keyframes right-ball-swing { 0% { transform: rotate(0deg); animation-timing-function: ea-out; } 25% { transform: rotate(-90deg); animation-timing-function: ea-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: ea-out； } 25% { transform: rotate(90deg); animation-timing-function: ea-in; } 50% { transform: rotate(0deg) } 100% {} } 以绳子的起点为圆心，摆动共4秒： 0%–25%(第一秒)： 顺时针旋转90度，速度为ea-out(逐渐变缓,因为动能转化为势能到了最高点速度为0) 25%–50%（第二秒）： 返回到0度，即逆时针旋转了90度，速度为ea-in，势能变为动能 50%–100%（后两秒）：不做变化（这两秒是右边小球在摆动）
that’it，最后来看效果图：
感谢阅读，o(*￣▽￣*)o
原创文章，转载请注明出处。
本文发布于:2023-04-06 07:35:01，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/386e183bc67772640459b8fde45355bd.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：CSS3动画实践——简易牛顿摆.doc
本文 PDF 下载地址：CSS3动画实践——简易牛顿摆.pdf
| 留言与评论（共有 0 条评论） |
