利用CSS3动画实现圆圈由小变大向外扩散的效果实例


Posted in HTML / CSS onSeptember 10, 2018

前言

本文主要给大家分享的是关于利用CSS3动画实现圆圈由小变大向外扩散的效果实例,文中涉及到 CSS3 的动画(animation)、2D 转换(transform: scale)

css3中新增了一个animation的属性,该属性类似于创建一个animation对象

如:animation: bounce 2.0s infinite ease-in-out;

animation有以下几个参数:

属性 描述 CSS
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。 3

CSS 3 中2D转换的实现用到两个属性:

属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 指定变换的基点的位置。 3

静态效果图:

利用CSS3动画实现圆圈由小变大向外扩散的效果实例

具体如代码所示:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
@keyframes warn {
 0% {
  transform: scale(0);
  opacity: 0.0;
 }
 25% {
  transform: scale(0);
  opacity: 0.1;
 }
 50% {
  transform: scale(0.1);
  opacity: 0.3;
 }
 75% {
  transform: scale(0.5);
  opacity: 0.5;
 }
 100% {
  transform: scale(1);
  opacity: 0.0;
 }
}
@-webkit-keyframes "warn" {
 0% {
  -webkit-transform: scale(0);
  opacity: 0.0;
 }
 25% {
  -webkit-transform: scale(0);
  opacity: 0.1;
 }
 50% {
  -webkit-transform: scale(0.1);
  opacity: 0.3;
 }
 75% {
  -webkit-transform: scale(0.5);
  opacity: 0.5;
 }
 100% {
  -webkit-transform: scale(1);
  opacity: 0.0;
 }
}
 
.container {
 position: relative;
 width: 40px;
 height: 40px;
 border: 1px solid #000;
}
/* 保持大小不变的小圆圈  */
.dot {
 position: absolute;
 width: 6px;
 height: 6px;
 left: 15px;
 top: 15px;
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border: 2px solid red;
 border-radius: 20px;
 z-index: 2;
}
/* 产生动画(向外扩散变大)的圆圈  */
.pulse {
 position: absolute;
 width: 24px; 
 height: 24px;
 left: 2px;
 top: 2px;
 border: 6px solid red;
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;
 border-radius: 30px;
 z-index: 1;
 opacity: 0;
 -webkit-animation: warn 3s ease-out;
 -moz-animation: warn 3s ease-out;
 animation: warn 3s ease-out;
 -webkit-animation-iteration-count: infinite;
 -moz-animation-iteration-count: infinite;
 animation-iteration-count: infinite;
}
</style>
 
</head>
 
<body>
<div class="container">
    <div class="dot"></div>
    <div class="pulse"></div>
</div>
</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

HTML / CSS 相关文章推荐
CSS3美化表单控件全集
Jun 29 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 #HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 #HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 #HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 #HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 #HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 #HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 #HTML / CSS
You might like
PHP中trim()函数简单使用指南
2015/04/16 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
原生js实现日期联动
2015/01/12 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
Python 可爱的大小写
2008/09/06 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
老生常谈Python基础之字符编码
2017/06/14 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
Python运算符+与+=的方法实例
2021/02/18 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
英国著名书店:Foyles
2018/12/01 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
信息技术培训感言
2014/03/06 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
Golang: 内建容器的用法
2021/05/05 Golang
python中filter,map,reduce的作用
2022/06/10 Python