css3小球坠落,CSS3 圆球体内的小球碰撞运动
CSS
语言:
CSSSCSS
确定
body {
background: #f9fbe7;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
width: 10rem;
height: 10rem;
margin-top: -5rem;
margin-left: -5rem;
background: #bbdefb;
border-radius: 100%;
}
.circle-container {
position: absolute;
top: 0;
left: 50%;
width: 1rem;
height: 10rem;
margin-left: -0.5rem;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.circle-container:before {
position: absolute;
top: 0;
left: 0;
content: '';
width: 1rem;
height: 1rem;
background: #fff3e0;
border-radius: 50%;
}
@-webkit-keyframes there-back {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(9rem);
transform: translateY(9rem);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes there-back {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(9rem);
transform: translateY(9rem);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.circle-container-0 {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.circle-container-0:before {
-webkit-animation: there-back 2s infinite 0s ease-in-out;
animation: there-back 2s infinite 0s ease-in-out;
}
.circle-container-1 {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.circle-container-1:before {
-webkit-animation: there-back 2s infinite 0.1s ease-in-out;
animation: there-back 2s infinite 0.1s ease-in-out;
}
.circle-container-2 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle-container-2:before {
-webkit-animation: there-back 2s infinite 0.2s ease-in-out;
animation: there-back 2s infinite 0.2s ease-in-out;
}
.circle-container-3 {
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
.circle-container-3:before {
-webkit-animation: there-back 2s infinite 0.3s ease-in-out;
animation: there-back 2s infinite 0.3s ease-in-out;
}
.circle-container-4 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle-container-4:before {
-webkit-animation: there-back 2s infinite 0.4s ease-in-out;
animation: there-back 2s infinite 0.4s ease-in-out;
}
.circle-container-5 {
-webkit-transform: rotate(225deg);
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
.circle-container-5:before {
-webkit-animation: there-back 2s infinite 0.5s ease-in-out;
animation: there-back 2s infinite 0.5s ease-in-out;
}
.circle-container-6 {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.circle-container-6:before {
-webkit-animation: there-back 2s infinite 0.6s ease-in-out;
animation: there-back 2s infinite 0.6s ease-in-out;
}
.circle-container-7 {
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
.circle-container-7:before {
-webkit-animation: there-back 2s infinite 0.7s ease-in-out;
animation: there-back 2s infinite 0.7s ease-in-out;
}
.circle-container-8 {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.circle-container-8:before {
-webkit-animation: there-back 2s infinite 0.8s ease-in-out;
animation: there-back 2s infinite 0.8s ease-in-out;
}
css3小球坠落,CSS3 圆球体内的小球碰撞运动相关推荐
- Unity Day1 小球坠落与吃金币
小球坠落 先创建一个平面(hierarchy-右键-3D Object-Plane) 然后创建一个小球(hierarchy-右键-3D Object-Sphere) 拖动小球位置,给小球施加刚体(选中 ...
- 【CSS3教程】CSS3基础常用技巧实例集合
为什么80%的码农都做不了架构师?>>> CSS3常用技巧 CSS3下条纹&方格斜纹背景的实现 一.效果抢先:CSS3下的条纹背景demo 这些美丽的纹饰全部都是由CS ...
- html渐变色CSS3 渐变,如何实现css3渐变色,css3渐变色怎么写
原标题:如何实现css3渐变色,css3渐变色怎么写 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS ...
- css3-1 css3游戏介绍、css3样式和优先级
css3-1 css3游戏介绍.css3样式和优先级 一.总结 一句话总结:我们写外部css表的时候可以用class,那样使用的人用id修改的话优先级就比我们高,达到目的. 1.html嵌套css样式 ...
- 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对 ...
- css3常用方法以及css3选择器
最重要的 CSS3 模块包括: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CSS3 边框 CSS3 边框 通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使 ...
- html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
- CSS3: 利用分层动画让元素沿弧形路径运动
原文:Moving along a curved path in CSS with layered animation 翻译:涂鸦码龙 译者注:部分代码示例在原文中可以看效果(作者写在博文里面了-), ...
- CSS3过渡效果(CSS3)
CSS3过渡效果(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
最新文章
- 福利,PyTorch中文版官方教程来啦(附下载)
- 对科大讯飞的过度宽容就是对科大讯飞的伤害,从科大讯飞裁员说起
- struts导出txt文件
- 【Tree】Prim算法思想与步骤
- Nginx反向代理的实战案例
- 安卓关于图片压缩的那些事儿,希望给每个安卓开发人员一些帮助
- 得物App联合Zippo推出限量款打火机 首批开售十分钟即售罄
- 哪句诗词最让你怦然心动?
- ofo 被爆仍在自动续费;苹果加紧培养新一代接班人;谷歌推出 Android 11 Go | 极客头条...
- Python核心编程读笔 4
- webpower中国区发布《2014年中国教育培训行业邮件营销数据报告》
- 【PCAN医疗应用系列】CAN总线技术在实现实时荧光定量基因扩展(PCR)仪控制系统上的应用(2)
- 0ctf_2016_unserialize
- CCED,一个时代的落幕
- 庆山《得未曾有》摘录
- origin出现demo水印解决方案
- 南京邮电大学嵌入式系统开发实验5:嵌入式Linux下LED报警灯驱动设计及编程
- Ubuntu 18.04安装坚果云后打开出现白板
- 机器人合肥乐博_乐博机器人编程——让机器人陪伴全国儿童成长
- JAVA中的Iterator