利用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的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
php文档更新介绍
2011/07/22 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
宿舍卫生检讨书
2014/01/16 职场文书
初中美术教学反思
2014/01/29 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
项目经理聘任书
2014/03/29 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python