css3做一个牛顿摆

效果图

<!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>

css3做一个牛顿摆相关推荐

[css] 使用css3做一个魔方旋转的效果
[css] 使用css3做一个魔方旋转的效果总的来说,用了一些 3D 效果的样式,如 translate3d,rotate3d,perspective,transform-style: preser ...
用css3做一个模拟火箭飞行的简单动画。
用css3做一个模拟火箭飞行的简单动画,图片我特意上传到了图床,你也可以试试. 效果大概是这样: 需要的知识点: 知道css的transform,transition,animation属性和定义动画 ...
教你用CSS3做一个旋转的宇宙星球
教你用CSS3做一个旋转的宇宙星球可能略有瑕疵,无非就是先画一个圆圈,把小球定位到上面,然后再让圆圈旋转即可直接上效果图代码 <!DOCTYPE html><html lang ...
html语言制作带样式的表格,html制作一个复杂表格 html5/CSS3做一个表格
table td{width: 100px;padding: 5px;}DataDataDataDataDataDataDataDataDataDataDataDataDataDataData 用HT ...
css3 做一个会动的菜单 menu 按钮动画效果
css3 做一个会动的菜单 menu 按钮动画效果需要做一个会的动画按钮效果,小前端部知道如何实现,我看了一眼需要的效果,给他写了一个简单的 demo. 设计师给了俩图片,一个是三这样的菜单图标 ...
css3 做一个漂亮的分割线
原文出处: http://blog.csdn.net/majormayer/article/details/50996444 在网页中我们经常会用到分割线,但是原始的分割线并不太美观,我们可以用css ...
html动画翻书特效,css3 做一个类似于翻书特效的3D动画
我们来看下做一个css3 3D动画需要哪些东西.前面我们已经使用transition和transform做了一些简单的操作. 设置3D场景做3D动画,我们首先要设置3D场景.3D场景我们通常用per ...
CSS3 做一个旋转的立体3D正方形动效核心【前端就业课第二阶段】CSS 零基础到实战（07）
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 一.transform-origin transform-o ...
用css3做一个求婚小动画
概述本案例主要是运用到了css3的animation.keyframes.transform等属性,熟悉了,就可以做更多的其他动画效果,这几个属性功能非常强大. 详细代码下载:http://www ...
css3做一个loading动画效果（详细思路）
纯css3的动画做效果: 小人来回移动,碰到小球时,小球消失. 首先,html搭建结构: <body><div class="wrapper"><di ...

css3做一个牛顿摆

效果图

css3做一个牛顿摆相关推荐

最新文章

热门文章