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的transform做的动态时钟效果
Sep 21 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
Jul 07 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 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网站提速三大“软”招
2006/10/09 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
韩国商务邀请函
2014/01/14 职场文书
优秀教师获奖感言
2014/01/31 职场文书
教师个人自我鉴定
2014/02/08 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
本科生自荐信
2014/06/18 职场文书
党校毕业心得体会
2014/09/13 职场文书
安全生产协议书
2016/03/22 职场文书