CSS3实现跳动的动画效果


Posted in HTML / CSS onSeptember 12, 2016

静态的效果图如下:

CSS3实现跳动的动画效果

这个要运用的新知识如下:

复制代码
代码如下:

//css3新知识
display: flex;
justify-content: center;
align-items: center;
animation: shadow .5s linear infinite;
@keyframes shadow {
0%, 100% {transform: scaleX(1);}
50% {transform: scaleX(1.2);}
}

::after 需要加定位,宽度才好使

实例代码如下

复制代码
代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{
background:#bbd149;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.box{
height: 50px;
width: 50px;
position: relative;
}
.box::before{
content: '';
height: 8px; width: 50px; background: #000; opacity: .2; border-radius: 50%;
position: absolute;
top: 67px;
left: 0;
animation: shadow .5s linear infinite;
}
.box::after{
border-radius: 5px;
background: #fff;
animation: rotate .5s linear infinite;
content: '';
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
}
@keyframes shadow {
0%, 100% {transform: scaleX(1);}
50% {transform: scaleX(1.2);}
}</p> <p>@keyframes rotate {
0% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(10px) rotate(22.5deg);
}
50% {
transform: translateY(20px) scale(1.1, 0.9) rotate(45deg);
border-bottom-right-radius: 50px;
}
75% {
ransform: translateY(10px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
</style>
</head></p> <p><body>
<div class="box">
</div>
</body>
</html>

总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
利用CSS3的flexbox实现水平垂直居中与三列等高布局
Sep 12 #HTML / CSS
对CSS3选择器的研究(详解)
Sep 16 #HTML / CSS
利用CSS3实现炫酷的飞机起飞动画
Sep 17 #HTML / CSS
CSS3 3D制作实战案例分析
Sep 18 #HTML / CSS
CSS3中动画属性transform、transition和animation属性的区别
Sep 25 #HTML / CSS
利用CSS3实现毛玻璃效果示例源码
Sep 25 #HTML / CSS
CSS3实现简易版的刮刮乐效果
Sep 27 #HTML / CSS
You might like
UCenter Home二次开发指南
2009/05/28 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
Python正则表达式分组概念与用法详解
2017/06/24 Python
python逆向入门教程
2018/01/15 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
python SVD压缩图像的实现代码
2019/11/05 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
vivo智能手机官方商城:vivo
2016/09/22 全球购物
材料成型专业个人求职信范文
2013/09/25 职场文书
会计核算科岗位职责
2014/03/19 职场文书
迎新生标语大全
2014/10/06 职场文书
整改落实自查报告
2014/11/05 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
社区元宵节活动总结
2015/02/06 职场文书
如何写通讯稿
2015/07/22 职场文书