css实现循环扩散光圈的效果
效果:
<div class="icon-warnCom"><icon class="icon-warns"><i class="dot"></i><i class="pulse"></i></icon></div>
@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;}
}/* 保持大小不变的小圆圈 */
.dot {position: absolute;width: 50px;height: 50px;left: -15px;top: -15px;-webkit-border-radius: 100;-moz-border-radius: 100;border: 20px solid #f6c100;border-radius: 100%;z-index: 2;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;
}
/* 产生动画(向外扩散变大)的圆圈 */
.pulse {position: absolute;width: 50px; height: 50px;left: -15px;top: -15px;border: 20px solid #f6c100;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;z-index: 1;opacity: 1;-webkit-animation: warn 2s ease-out;-moz-animation: warn 2s ease-out;animation: warn 2s ease-out;-webkit-animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;animation-iteration-count: infinite;
}.icon-warnCom{ position: absolute; width: 12px; height: 12px; background-color: #ffd803; border-radius: 100%; top: 100px; left: 100px;}
.icon-warns{ position: relative; width: 100%; height: 100%; display: block;}
.icon-warnCom .dot,.icon-warnCom .pulse{ left: -24px; top: -24px; width: 60px; height: 60px}
css实现循环扩散光圈的效果相关推荐
- CSS实战 - 波纹扩散效果
1.实现效果 效果一:涟漪扩散效果 效果二:波动扩散效果 2.实现原理 在 div 里定义圆形,使用 css 的动画,让圆形的大小由小到大进行变化. ① 涟漪扩散: 定义了3个带边框的空圆,让这3个圆 ...
- CSS:实现动态流光线条效果/动态流光线条颜色渐变效果
需求描述: 需要实现类似下图中的动态流光线条效果: 思路: 提到这种动态绘制矢量图形的需求,一般会想到使用canvas:由于笔者不太熟悉canvas动画也可以考虑用CSS来实现,这里先记录使用CSS实 ...
- css玻璃雨滴效果,纯css实现窗户玻璃雨滴逼真效果_javascript技巧
写样式,毕竟每个雨滴都长得不一致嘛.使用预处理器除了可以帮助我们减少工作量之外,还可以使用预处理器中的循环.变量等.最主要的是可以使用随机函数产生的随机值,让我们不需要单独处理上百个雨滴. 有关于HA ...
- php实现动态按钮效果,纯css实现MaterialDesign水滴动画按钮效果的js实现方法
本篇文章给大家带来的内容是关于纯css实现Material Design水滴动画按钮效果的js实现方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在上一篇,我们已经实现了用纯cs ...
- 用CSS Filter 可以实现相同的效果
用CSS Filter 可以实现相同的效果,而且可以省去图片,代码如下: <table width="100%" height="133" border ...
- html桌面卡牌效果,html+css实现响应式卡片悬停效果
话不多,看效果先: 卡片悬停,响应式卡片,简约效果. 实现: 1. 定义标签,.kapian为最底层盒子,然后两个子盒子一个放图片,一个放文本: The aurora borealis natural ...
- [css] 请说说CSS3实现文本效果的属性有哪些?
[css] 请说说CSS3实现文本效果的属性有哪些? text-shadow:文字阴影效果 word-wrap:换行设置 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...
- [css] 使用css写一个垂直翻转图片的效果
[css] 使用css写一个垂直翻转图片的效果 transform: rotateX(180deg); /* 垂直镜像翻转 */ 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持 ...
- php图片滑动的属性,使用css怎么实现图片的滑动效果?(示例)
本篇文章主要给大家介绍关于css实现图片的滑动效果示例,希望大家阅读完本篇后对css滑动效果的相关知识有所了解. 下面给大家举一个简单的css图片滑动效果示例(自下而上滑动): css怎么实现图片滑动 ...
- css的img移上去边框效果及CSS透明度
css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; borde ...
最新文章
- scrollBarStyle- listview滑动条调整
- 对oracle sql的一些总结
- XGB 调参基本方法
- 《算法竞赛入门经典》 例题 4-4 信息编码 (Message Decoding,ACM,ICPC World Finals 1991,UVa 213)
- php滴滴平台接口,图片服务API文档
- c语言访问oc变量,OC中的方法调用流程
- 飞步科技三篇论文入选CVPR 2022
- 【字符串】【KMP模板--最小循环节总结】
- Linux电源管理(1)_整体架构
- 【2019银川网络赛A:】Maximum Element In A Stack(动态求栈中最大值)
- adb ps shell 查看进程_adb shell查看进程方法
- 运行内存扩展器(RAM)扩大,最高达2.5g
- oracle dbms_utility.get_time,dbms_utility如何使用?
- 清除linux系统盘空间,linux磁盘空间不足怎么办,磁盘清理方法
- python记时命令
- JSP高校信息管理系统myeclipse开发sql数据库web结构计算机java编程
- pd.DataFrame.melt()函数
- epoll 主从反应堆模式代码实现
- 2023年中高级前端养成指南-需要关注和学习的13大类80余个前端技术栈与前端趋势-看这篇就够了系列
- 五一培训 清北学堂 DAY2