css动画实现涟漪效果 波纹动态效果_标注下面涟漪波动_陈序员01的博客-程序员宅基地

技术标签: css  html5  html  css3  

效果图:

在这里插入图片描述
图上是echarts,本文是使用的是css3动画制作的,效果一样

.html

<div class="GreenStatus"></div>

.css

/* 绿色小圆点 */
.GreenStatus {
    
    width: 10px;
    height: 10px;
    background-color: #6cb552;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.GreenStatus::before {
    
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -9px;
    margin-top: -9px;
    border-radius: 50%;
    animation: GreenDot 1.5s ease-out 0s infinite;
    background-color: rgba(108, 181, 82, 0.5);
}

@keyframes GreenDot {
    
    0% {
    
        transform: scale(0.5);
        opacity: 1;
    }
    30% {
    
        opacity: 1;
    }
    100% {
    
        transform: scale(1.4);
        opacity: 0;
    }
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_46193248/article/details/108639727

智能推荐

mxnet,gluon学习笔记3——主干网络实现代码对比:AlexNet,VGG,NIN,googLeNet,ResNet,DesNet_net.add(nn.dense(512,activation='relu'),nn.dense(2_Yang He的博客-程序员宅基地

参考李沐的mxnet学习资料。注,为了实际应用,部分dim参数我调整减小,但网络结构主体思想不变。from mxnet.gluon import nnfrom mxnet import nd1. LeNetnet = nn.Sequential()net.add(nn.Conv2D(channels=6, kernel_size=5, activation='sigmoid..._net.add(nn.dense(512,activation='relu'),nn.dense(256,activation='relu'),nn.d

实例图解:联想笔记本键盘维修全过程(5)_笔记本_科技时代_新浪网_联想笔记本键盘电路在哪里_chief1985的博客-程序员宅基地

导读: 把键盘2层分别分开,就可以看到一个连接点,连接点连接着两边的键盘,像蜜蜂窝的小点字就是我们经常按键盘的接触点了,一条水银线可以连接很多个点(就等于有时候我使用键盘的时候为什么有一排键敲打不出来,有可能就是水银断开造成的)就算是一个键敲打不出来工程师都要把整个键盘拆出来使用万用表每条线路进行测试(因涉及到以后客户使用的稳定性等等原因,所以我们会对所有的线路进行一次全面的检查)细心检察_联想笔记本键盘电路在哪里

本地化 A NOTE 桌面便签软件 ---最佳开源软件之一_唐古拉山的博客-程序员宅基地

原版软件可以到官方去下载:http://a-note.sourceforge.net但是官方并没有提供简体中文的语言文件,繁体的倒是有,但是直接把繁体转化过来却感觉很多地方不适合大陆简体习惯,所以我大概的翻译了下,结合网友: yakchen 的翻译,合在一起,算是不错了.我另外找了几个不错的声音闹钟文件,需要此软件和声音文件的可以来信向我索取.当然,微软的 OneNote 可能更好

easyUI combox静态动态联动_weixin_30734435的博客-程序员宅基地

easyUI重写了select,取而代之的是combobox,有如下几种方式可以创建一个combobox1、使用select标签,并加上class="easyui-combobox",这种方式比较适用于静态的选项2、使用input标签,并加上class="easyui-combobox",后面跟上data-options,可以用local或是remote方式动态加载数据3、使用js方式..._easyui combobox怎么动态设置prompt

参数化查询为什么能够防止SQL注入_东东咚咚咚咚咚丶的博客-程序员宅基地

很多人都知道SQL注入,也知道SQL参数化查询可以防止SQL注入,可为什么能防止注入却并不是很多人都知道的。本文主要讲述的是这个问题,也许你在部分文章中看到过这块内容,当然了看看也无妨。 首先:我们要了解SQL收到一个指令后所做的事情:具体细节可以查看文章:Sql Server 编译、重编译与执行计划重用原理在这里,我简单的表示为: 收到指令 -&gt; 编译SQL生成执行计划...

随便推点

90、MPLS基础配置实验_weixin_33958585的博客-程序员宅基地

1、MPLS解析2、实验拓扑3、基础配置R1配置interface Serial0/0ip address 12.1.1.1 255.255.255.0router ospf 110router-id 1.1.1.1network 12.1.1.0 0.0.0.255 area 0R2配置interface Serial0/0ip address 12.1.1.2 2...

golang学习笔记(1)环境安装及入门程序_golang seeker_seeker1990的博客-程序员宅基地

一 go语言基础环境略二 开发工具安装略三 示例点击配置运行程序_golang seeker

亲测可用Kali源_kali 测试源-程序员宅基地

源文件位置:/etc/apt/sources.list# kali官方源deb http://http.kali.org/ kali-rolling main non-free contribdeb-src http://http.kali.org/ kali-rolling main non-free contrib#中科大源deb http://mirrors.ustc.e..._kali 测试源

matlab实现MCMC的马尔可夫切换ARMA - GARCH模型估计-程序员宅基地

系统切换模型,尤其是马尔可夫切换(MS)模型,被认为是捕获时间序列非线性的有前景的方法。将MS模型的元素与完全自回归移动平均 - 广义自回归条件异方差(ARMA - GARCH)模型相结合,给参数估计器的计算带来了严重的困难。我们制定了完整的MS- ARMA - GARCH模型及其贝叶斯估计。这有利于使用马尔可夫链蒙特卡罗方法,并允许我们开发一种算法来计算我们模型的方案和参数的贝叶斯估..._garch模型参数的mcmc估计

HttpClient策略驱动的cookie管理方式_rub的博客-程序员宅基地

[code="java"]/* * $Header: /home/jerenkrantz/tmp/commons/commons-convert/cvs/home/cvs/jakarta-commons//httpclient/src/java/org/apache/commons/httpclient/cookie/CookiePolicy.java,v 1.15 2004/09/14 20...

推荐文章

热门文章

相关标签