android 原地弹跳动画,有趣的CSS弹跳动画
这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴影的部分也会随着正方形升高而缩小,至于到底该怎么完成呢?让我们继续看下去。
利用伪元素
由于只使用了一个div,要同时达到正方形旋转与阴影缩放的效果,这里必须使用两个伪元素(before与after)来完成,严格来说,虽然只有一个div,但是却是把这个div当作外框,让伪元素before作为旋转的正方形,让伪元素after作为阴影。
.box{
position:relative;
}
.box:before{
content:'';
position:absolute;
z-index:2;
top:60px;
left:50px;
width:50px;
height:50px;
background:#c00;
border-radius:2px;
transform: rotate(45deg);
}
.box:after{
content:'';
position:absolute;
z-index:1;
top:128px;
left:52px;
width:44px;
height:3px;
background:#eaeaea;
border-radius:100%;
}
CSS动画
画出正方形与阴影之后,再来就是要做动画了,为了避免太过复杂,这里我们先不要旋转,先单纯让正方形上下跳动,然后阴影会放大缩小,下面的示例的动画,又新增了20%与80%的keyframe,目的是为了让接触的时候角落才会变圆,不然就会变成刚开始移动时尖角就变圆,就会很怪异了。
.box:before{
content:'';
position:absolute;
z-index:2;
top:60px;
left:50px;
width:50px;
height:50px;
background:#c00;
border-radius:2px;
transform: rotate(45deg);
-webkit-animation:box .8s infinite ;
}
@-webkit-keyframes box{
0%{
top:50px;
}
20%{
border-radius:2px; /*从20%的地方才开始变形*/
}
50%{
top:80px;
border-bottom-right-radius:25px;
}
80%{
border-radius:2px; /*到80%的地方恢复原状*/
}
100%{
top:50px;
}
}
.box:after{
content:'';
position:absolute;
z-index:1;
top:128px;
left:52px;
width:44px;
height:3px;
background:#eaeaea;
border-radius:100%;
-webkit-animation:shadow .8s infinite ;
}
@-webkit-keyframes shadow{
0%,100%{
left:54px;
width:40px;
background:#eaeaea;
}
50%{
top:126px;
left:50px; /*让阴影保持在原位*/
width:50px;
height:7px;
background:#eee;
}
}
加入旋转效果
了解原理之后,我们只要再加上旋转的属性,就可以达到弹跳起来的时候有旋转的效果,不过这里又有用到一个小技巧,就是落下的时候是90度转到45度,弹上去的时候从45旋转到0度,然后在这一瞬间从0度变成90度(100%到0%),如此一来我们就会产生错觉,感觉好像一直在旋转了。
@-webkit-keyframes box{
0%{
top:50px;
transform: rotate(90deg); /**/
}
20%{
border-radius:2px;
}
50%{
top:80px;
transform: rotate(45deg);
border-bottom-right-radius:25px;
}
80%{
border-radius:2px;
}
100%{
top:50px;
transform: rotate(0deg);
}
}
举一反三,我们也可以把角度反转,就会往另外一边弹跳。
如果我们把动画里头添加linear,就会变成线性的连续方式喔。
android 原地弹跳动画,有趣的CSS弹跳动画相关推荐
- android天女散花效果_Android有趣的爆炸散落动画view:开源ExplosionField
Android有趣的爆炸散落动画view:开源ExplosionField github上有一个比较有趣的view动画开源项目ExplosionField,当点击该view时候,产生如图所示效果 ...
- animate.css 签字动画,使用animate.css完成动画
animate.css aniamte.css是一个很方便的库,内置了许多常用的动画 和jquery搭配使用比较方便 $.fn.extend({ animateCss: function (anima ...
- php带旋转动画刷新页面,css旋转动画效果的简单实现示例详解
我们可以通过css来做出动画效果,下面我为大家演示的是p的旋转,颜色过渡的动画 a{ text-align:center; line-height:100px; transition:all 2s; ...
- ios css动画残影,CSS 过渡动画在IOS中表现异常
设置了一个隐藏的圆环,在页面开始时旋转露出.发现在IOS(safari)中过渡动画展示不完整,只展示了起始部分,后面直接跳转到结束状态了. demo .wrap { width: 200px; hei ...
- html弹跳特效,有趣的纯CSS3弹性卡通小怪物弹跳动画特效
这是一款使用纯CSS3制作的非常有趣的卡通小怪物弹跳动画特效.该CSS3特效中有三个卡通小怪物,它们在不停的上下弹跳,并且各自的身体也带有一些弹性效果. 使用方法 HTML结构 每一个卡通小怪物的HT ...
- html弹跳动画效果,CSS弹跳动画效果的实现方法
这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴影的部分也会随着正方形升高而缩小,至于到底该怎么完成呢?让我 ...
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!
谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画! 原文:谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画! 开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到 ...
- Android有趣的爆炸散落动画view:开源ExplosionField
Android有趣的爆炸散落动画view:开源ExplosionField github上有一个比较有趣的view动画开源项目ExplosionField,当点击该view时候,产生如图所示效果 ...
最新文章
- 搭建私有Git服务器
- pdf 中添加文章操作
- Cognos报表展示图片小技巧
- 2019蓝桥杯省赛---java---B---4(数的分解)
- 【第七次JAVA课,java语法基础】课件总结
- Linux网络协议栈:Linux 中每个 TCP 连接最少占用多少内存?
- 台风怎么看内存颗粒_【无趣】使用300多元的D4 16G内存是种什么体验
- Objects as Points 论文总结
- [经验]修改SDI主窗口Title
- jdbc 通过反射和元数据编写通用的查询对象方法
- TurboC 2.0下载及使用方法
- 数学建模 -- 层次分析法(AHP)
- JavaScript权威指南学习笔记(一)
- D. Concatenated Multiples
- 大学生面试20个经典问题及回答思路!
- 德莱联盟 计算几何 线段相交
- 微信小程序优选驾考驾照考试预约+后台管理系统SSM-JAVA【数据库设计、论文、源码、开题报告】
- 最全总结图论在识别人脑网络连通性模式中的应用——相关与相关性,主成分分析,聚类分析,互信息,格兰杰因果分析,动态因果模型,贝叶斯网络,转移熵
- AndroidApp之图书管理系统(一)
- matplotlib之属性组合包(cycler)
热门文章
- 【小码哥】性能瓶颈分析及案例总结
- 安装Vmware出现Failed to install USB inf file问题如何解决?
- RabbitMQ启动异常 Job for rabbitmq-server.service failed because the control process exited
- Autodesk 系列激活
- 《天堂向左,深圳往右》
- The Hitchhiker’s Guide to Python! — The Hitchhiker's Guide to Python
- 20221213英语学习
- Sparse Checkout 在 Monorepo 工程下的应用
- [导入]“四大恶人”铁血股市
- 数字 IC 笔试面试必考点(3)数字 IC 前端设计 + 后端实现