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实现图片翻牌特效
Mar 10 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 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使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
PHP生成器简单实例
2015/05/13 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
Python之字典添加元素的几种方法
2020/09/30 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
职业技术学校毕业生推荐信
2013/12/03 职场文书
就业自荐书
2013/12/05 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
食品采购员岗位职责
2014/04/14 职场文书
班级课外活动总结
2014/07/09 职场文书
踏青活动策划方案
2014/08/19 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
python实现监听键盘
2021/04/26 Python