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

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

CSS3动画实践——简易牛顿摆的更多相关文章

  1. iOS开发 ----- 加载动画之牛顿摆的实现

    牛顿摆动画 自己看动画有一段时间了,但是还是不是很能理解其中的一些属性方法之类的东西,琢磨了一下午写了一个牛顿摆的动画,这里记录一下,一遍以后查看先上图 先说下思路 说下牛顿摆的大致运动过程 根据牛顿 ...

  2. 【转】CSS3动画帧数科学计算法

    本文来源于:财付通TID 原作者:bboy90 总结都浓缩在这个工具里了,想知道工具的地址或想窥探工具诞生的趣事请往下看 . —————————————————————–     华丽丽的开篇     ...

  3. 50.纯 CSS 创作一个永动的牛顿摆

    原文地址:https://segmentfault.com/a/1190000015270808#articleHeader0 感想: 动画效果 + ::before + 2D转换 HTML code ...

  4. css3动画第一式--简单翻滚

    在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...

  5. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  6. 学习CSS3动画（animation）

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  7. 用CSS3动画，让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  8. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  9. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

随机推荐

  1. ES新提案：双问号操作符

    摘要: 简单实用的新特性. 原文:ES新提案:双问号操作符 译者:前端小智 本文主要讲Gabriel Isenberg撰写的ES提案"Nullish coalescing for JavaS ...

  2. js 常用工具方法

    1.格式化字符串 String.prototype.format = function () { let args = arguments; return this.replace(/\{(\d+)\ ...

  3. BayaiM__oracle切换归档模式步骤：

    BayaiM__oracle切换归档模式(步骤): ------------------oracle11g设置归档模式和非归档模式--------------------------[root@tes ...

  4. PyCharm注释中出现中文运行报错的解决办法

    SyntaxError: Non-UTF-8 code starting with '..... 方法一:在文件首行加上 # -*- coding:utf-8 -*- 方法二:更改编码格式 File ...

  5. 毕业设计代做，各种系统微服务项目ssm项目，员工管理系统，微信小程序，购物商城，二手商城系统，销售系统，等等

    毕业设计代做,各种系统,微服务项目,ssm项目 小程序,商城等,期末作业等都可以,价格好说,长期接单, 有项目说明书,软件介绍相关文档,答辩的时候包过,知识点对接好,给你讲解等, 毕业设计代做,各种系 ...

  6. layer icon样式及 一些弹框使用方法

    一.layer的icon样式 以上样式测试代码: layer.confirm('icon测试', {icon: 1, title:'提示'}, function(index){ //do someth ...

  7. 【2019.8.14 慈溪模拟赛 T2】黑心老板（gamble）（2-SAT）

    \(2-SAT\) 考虑每个点只能选择\(R\)或\(B\),可以看作选\(0\)或\(1\). 然后对于给出的关系式,若其中一个位置满足关系式,另两个位置就必须不满足关系式,这样就可以对于每个关系式 ...

  8. Paper | Noise2Noise: Learning Image Restoration without Clean Data

    目录 故事背景 算法原理 点估计 神经网络算法与点估计的关系 核心思想 回头品味 实验 高斯 其他生成噪声 发表在2018 ICML. 摘要 We apply basic statistical re ...

  9. 第04组 Alpha冲刺（4/6）

    队名:new game 组长博客:戳 作业博客:戳 组员情况 鲍子涵(队长) 燃尽图 过去两天完成了哪些任务 才两天,也就是实现一些功能而已 复习 接下来的计划 实现更多的功能 为这周的比赛准备 还剩 ...

  10. [算法模版]子序列DP

    [算法模版]子序列DP 如何求本质不同子序列个数? 朴素DP 复杂度为\(O(nq)\).其中\(q\)为字符集大小. \(dp[i]\)代表以第\(i\)个数结尾的本质不同子序列个数.注意,这里对于 ...