利用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实现点击放大的动画实例代码
Feb 27 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 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 递归效率分析
2009/11/24 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
babel基本使用详解
2017/02/17 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python单链表简单实现代码
2016/04/27 Python
Python科学画图代码分享
2017/11/29 Python
Django的分页器实例(paginator)
2017/12/01 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
Python星号*与**用法分析
2018/02/02 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
Python匿名函数及应用示例
2019/04/09 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
Django CBV类的用法详解
2019/07/26 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
超市开店计划书
2014/04/26 职场文书
10的分与合教学反思
2014/04/30 职场文书
企业年检委托书范本
2014/10/14 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
2014年变电站工作总结
2014/12/19 职场文书
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript