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% {}
}
感谢阅读,o(* ̄▽ ̄*)o
原创文章,转载请注明出处。
CSS3动画实践——简易牛顿摆的更多相关文章
- iOS开发 ----- 加载动画之牛顿摆的实现
牛顿摆动画 自己看动画有一段时间了,但是还是不是很能理解其中的一些属性方法之类的东西,琢磨了一下午写了一个牛顿摆的动画,这里记录一下,一遍以后查看先上图 先说下思路 说下牛顿摆的大致运动过程 根据牛顿 ...
- 【转】CSS3动画帧数科学计算法
本文来源于:财付通TID 原作者:bboy90 总结都浓缩在这个工具里了,想知道工具的地址或想窥探工具诞生的趣事请往下看 . —————————————————————– 华丽丽的开篇 ...
- 50.纯 CSS 创作一个永动的牛顿摆
原文地址:https://segmentfault.com/a/1190000015270808#articleHeader0 感想: 动画效果 + ::before + 2D转换 HTML code ...
- css3动画第一式--简单翻滚
在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...
- CSS3动画制作
CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
- 学习CSS3动画(animation)
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- 用CSS3动画,让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
随机推荐
- 简易用户管理系统-前端实现(表单&提交请求&button$基础)
laravel框架编写简易用户管理系统,前端Layui框架. 1.动态生成列表项 实现效果 PHP后台传入用户对象($users). 前端页面接收数据传入table. 逻辑就是在生成表格时,遍历传来的 ...
- [20190517]rman tape compressed.txt
[20190517]rman tape compressed.txt --//前一段测试rman选择压缩备份时,如果备份单个数据文件小于64M-3*8K时,先建立大小64M文件,最后会回收到自己的备份 ...
- Docker Harbor
简介: Harbor是一个用于存储Docker镜像的企业级Registry服务:本章将介绍如何搭建Harbor Registry! Github官方安装文档: https://github.com/g ...
- cpu 乱序执行与问题【转】
转自:https://blog.csdn.net/lizhihaoweiwei/article/details/50562732 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议 ...
- C++ 学习六 operator关键字(重载)
转载:http://blog.sina.com.cn/s/blog_4b3c1f950100kker.html operator是C++的关键字,它和运算符一起使用,表示一个运算符函数,理解时应将 o ...
- Linux学习(一)简介
Linux 简介 Linux 内核最初只是由芬兰人林纳斯·托瓦兹(Linus Torvalds)在赫尔辛基大学上学时出于个人爱好而编写的. Linux 是一套免费使用和自由传播的类 Unix 操作系统 ...
- python27期前端
第一天笔记:HTML:是一种标识性的语言css:层叠样式表是一种用来表现HTML等文件样式(效果)的计算机语言JavaScript:简称“JS”,是一种属于网络的脚本语言 常用来为网页添加各式各样的动 ...
- USACO Corn Fields
洛谷 P1879 [USACO06NOV]玉米田Corn Fields 洛谷传送门 题目描述 Farmer John has purchased a lush new rectangular past ...
- CF1278C-Berry Jam-(前缀和)
https://vjudge.net/problem/CodeForces-1278C 题意:有2n瓶果酱,中间有一个楼梯隔开,从中间往左或右两边清空果酱,使得两种果酱的数量相等,最少要清空多少瓶 思 ...
- 使用threaddump-analyzer 快速查看jvm thread 状态信息
日常开发中,我们可以需要通过thread dump 查看线程信息,比如锁,spotify 团队提供了一个web 界面,很方便 以下是简单使用,同时添加了docker 支持 添加docker 支持 cl ...