CSS3动画实践——简易牛顿摆

最近在练习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

原创文章，转载请注明出处。

转载于:https://www.cnblogs.com/freddysia/p/11070055.html

CSS3动画实践——简易牛顿摆相关推荐

制作简易的牛顿摆锤模型
作者:坚定的守猴撰写时间:2019年1月20日开发工具和关键技术:DW CSS3动画旋转和延迟牛顿摆锤,一个有意思物理模型.下面用CSS3的动画来实现这有意义模型. 代码如下: 先看结构结构就是 ...
修改fragment的进入动画_3DsMax—牛顿摆球（动量守恒摆球）动画
最终效果本篇为图文教程,已经将牛顿摆球动画视频教程放到3dsmax学习网中,需要看视频教程的请到3DsMax学习网(www.dddmax.cn)教程中观看. 01 打开一个牛顿摆球模型,如图所示.( ...
CSS3动画帧数科学计算法http://tid.tenpay.com/?p=5983
总结都浓缩在这个工具里了,想知道工具的地址或想窥探工具诞生的趣事请往下看 . ---------------------– 华丽丽的开篇 ---------------------- ...
彩色牛顿摆球Canvasjs特效
下载地址彩色牛顿摆球Canvas特效是一款基于HTML5 Canvas绘制的彩色霓虹灯状牛顿摆球,飘动的摆球动画特效. dd:
css520.520,30个纯css3动画代码片段和效果演示合集
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...
深入理解CSS3动画 rotate
我这个解释应该是会比较全的,如果有兴趣深入了解CSS3动画的朋友,往下看,也许会有意想不到的收获. 本来想找张浏览器空间坐标轴的图.结果没有找到. 那就听我说,你们想象一下. x轴水平朝右,y轴垂直于 ...
html 语言 gif 动画,动效篇（1）－－从简单CSS3动画片段代码，到生成gif动图～
简单css动画片段代码(最终效果 ) (一)请自行下载安装Dreamweaver 在Dreamweaver编写代码(如需参考请复制下列代码) (二)HTML CSS代码详解css代码(/*详解*/) ...
css怎么动画中该透明度,通过css3动画和opacity透明度实现呼吸灯效果
本文介绍了通过css3动画和opacity透明度实现呼吸灯效果的方法,分享给大家,具体如下: 呼吸灯 /*也可以通过加层罩,通过设置层罩透明度来实现亮度动画*/ body{ background-co ...
小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...
css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

CSS3动画实践——简易牛顿摆

CSS3动画实践——简易牛顿摆相关推荐

最新文章

热门文章