CSS3动画产生圆圈由小变大向外扩散的效果

涉及到 CSS3 的动画（animation）、2D 转换（transform: scale），具体如代码所示。

github： https://github.com/wind-stone/CSS3-Circle-Diffusion

<!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>

CSS3动画产生圆圈由小变大向外扩散的效果相关推荐

android 水滴动画,Android动画探索——图标依次变大的水滴效果
一直打算模仿ios,做一个安卓的水滴效果:比如有四个图标,四个图标依次出现,并由小变大.就像水滴掉落时一头大一头小一样. 首先分析需求: 1. 四个图标由小变大,那么是图标ScaleX和ScaleY两 ...
unity3D-Gear VR字体由小变大效果
我做的是让射线击中一个物体,然后3秒内让字体有小变大的效果. 这个东西的主要思路是让画布由0->0.03f.也可以按这个思路去做其他东西不会的可以下面可以给我留言在这里插入代码片` IEnu ...
最新伦敦金行情分析技巧：由小变大循序渐进
经常研究过去的走势,有助于我们锻炼自己的分析逻辑.磨利我们的分析武器.但是说到底,能够助我们赚得利润的,始终是最新的伦敦金行情分析技术,那么如何应用最新伦敦金行情分析技巧才能最大程度地让我们获得高胜率 ...
c语言变大变小的图片,51单片机模拟水滴由小变大然后滴落现象（附带C语言源码）...
51单片机模拟水滴由小变大然后滴落现象(附带C语言源码) [复制链接] #include typedef unsigned char u8; typedef signed char v8; typed ...
字体大小变化_变小变大
字体大小变化 When I was in my final year as a university student, I was preparing and collecting sufficien ...
Android 自定义动画view（小变大，旋转，色值）
也不知道到看了多少的动画总结了,但是用到的时候太少,过段时间就会忘记了. 既然如此,我选择直接去动手学习,步步进阶. 效果: 上代码之前我们分析一下才会加深自己的印象: 需要画一个矩形和一个圆形 ...
微信小程序css3动画怎么写,微信小程序动画课程-通过wxss(css)来实现-animation 属性...
animation 属性微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 定义和用法 animat ...
css动画（图片触碰变大）
img{transition-property: all;transition-duration: 0.5s;transition-timing-function: ease;transition-d ...
latex mdpi模板 \begin{spacing}{1.5}行间距太小变大\begin{algorithm
用\setstretch{1.35} \begin{algorithm \usepackage{setspace}%行间距 \usepackage{algorithm} \usepackage{alg ...

CSS3动画产生圆圈由小变大向外扩散的效果

CSS3动画产生圆圈由小变大向外扩散的效果相关推荐

最新文章

热门文章