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弹性盒模型开发笔记(一)
Apr 26 HTML / CSS
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
Sep 24 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 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
php+mysql 实现身份验证代码
2010/03/24 PHP
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
探讨:如何编写PHP扩展
2013/06/13 PHP
php实现zip文件解压操作
2015/11/03 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
PHP实现简单登录界面
2019/10/23 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
javascript打印输出json实例
2013/11/11 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
研究生毕业鉴定
2014/01/29 职场文书
业务员简历自我评价
2014/03/06 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
匿名检举信范文
2015/03/02 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
教师廉政准则心得体会
2016/01/20 职场文书