css3 彩带扩散效果_【css3动画】圆波扩散效果

news/2024/7/8 6:38:25 标签: css3 彩带扩散效果

圆波扩散动画效果，就是一个圆由中心向四周循环扩散的动画效果。圆波扩散动画效果应用非常广泛，例如可以用来表示某一个位置的状态信息，在网页设计中，常常被用来作为登录或切换页面时的等待状态。如下图所示：

【css3动画】圆波扩散效果

本文将使用纯CSS3实现上图动画效果。

实例一：由实心圆点向四周扩散(有阴影)

css3动画圆波扩散效果

@keyframes warn {

0% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.0;

}

25% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.1;

}

50% {

transform: scale(0.5);

-webkit-transform: scale(0.5);

opacity: 0.3;

}

75% {

transform: scale(0.8);

-webkit-transform: scale(0.8);

opacity: 0.5;

}

100% {

transform: scale(1);

-webkit-transform: scale(1);

opacity: 0.0;

}

}

@keyframes warn1 {

0% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.0;

}

25% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.1;

}

50% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.3;

}

75% {

transform: scale(0.5);

-webkit-transform: scale(0.5);

opacity: 0.5;

}

100% {

transform: scale(0.8);

-webkit-transform: scale(0.8);

opacity: 0.0;

}

}

.container {

position: relative;

width: 120px;

height: 120px;

left: 10px;

top: 10px;

}

/* 保持大小不变的小圆点 */

.dot {

position: absolute;

width: 7px;

height: 7px;

left: 134px;

top: 134px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border: 1px solid #33ccff;

border-radius: 50%;

background-color:#33ccff; /* 实心圆 ，如果没有这个就是一个小圆圈 */

z-index: 2;

}

/* 产生动画(向外扩散变大)的圆圈 第一个圆 */

.pulse {

position: absolute;

width: 35px;

height: 35px;

left: 120px;

top: 120px;

border: 1px solid #3399ff;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

z-index: 1;

opacity: 0;

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

box-shadow: 1px 1px 30px #3399ff; /* 阴影效果 */

}

/* 产生动画(向外扩散变大)的圆圈 第二个圆 */

.pulse1 {

position: absolute;

width: 35px;

height: 35px;

left: 120px;

top: 120px;

border: 1px solid #3399ff;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

z-index: 1;

opacity: 0;

-webkit-animation: warn1 2s ease-out;

-moz-animation: warn1 2s ease-out;

animation: warn1 2s ease-out;

-webkit-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

animation-iteration-count: infinite;

box-shadow: 1px 1px 30px #3399ff; /* 阴影效果 */

}

上述代码简要介绍：

1、中心是一个实心圆， .dot 类里加了背景属性：background-color:#33ccff; ，如果没有背景颜色，则为一个小圆圈。

2、使用了两个圆来先后循环扩散，形成“波”的效果。两个圆的类分别是：.pulse 和 .pulse1 。

3、扩散圆加了阴影，“波”效果更好。实现方法是在 .pulse 和 .pulse1 的类里使用属性：box-shadow: 1px 1px 30px #3399ff;

实例二：由实心圆点向四周扩散(无阴影)

css3动画圆波扩散效果

@keyframes warn {

0% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.0;

}

25% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.1;

}

50% {

transform: scale(0.5);

-webkit-transform: scale(0.5);

opacity: 0.3;

}

75% {

transform: scale(0.8);

-webkit-transform: scale(0.8);

opacity: 0.5;

}

100% {

transform: scale(1);

-webkit-transform: scale(1);

opacity: 0.0;

}

}

@keyframes warn1 {

0% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.0;

}

25% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.1;

}

50% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.3;

}

75% {

transform: scale(0.5);

-webkit-transform: scale(0.5);

opacity: 0.5;

}

100% {

transform: scale(0.8);

-webkit-transform: scale(0.8);

opacity: 0.0;

}

}

.container {

position: relative;

width: 120px;

height: 120px;

left: 10px;

top: 10px;

}

/* 保持大小不变的小圆点 */

.dot {

position: absolute;

width: 7px;

height: 7px;

left: 134px;

top: 134px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border: 1px solid #33ccff;

border-radius: 50%;

background-color:#33ccff; /* 实心圆 ，如果没有这个就是一个小圆圈 */

z-index: 2;

}

/* 产生动画(向外扩散变大)的圆圈 第一个圆 */

.pulse {

position: absolute;

width: 35px;

height: 35px;

left: 120px;

top: 120px;

border: 1px solid #3399ff;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

z-index: 1;

opacity: 0;

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

}

/* 产生动画(向外扩散变大)的圆圈 第二个圆 */

.pulse1 {

position: absolute;

width: 35px;

height: 35px;

left: 120px;

top: 120px;

border: 1px solid #3399ff;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

z-index: 1;

opacity: 0;

-webkit-animation: warn1 2s ease-out;

-moz-animation: warn1 2s ease-out;

animation: warn1 2s ease-out;

-webkit-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

animation-iteration-count: infinite;

}

实例三：由空心圆圈向四周扩散(有阴影)

css3动画圆波扩散效果

@keyframes warn {

0% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.0;

}

25% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.1;

}

50% {

transform: scale(0.5);

-webkit-transform: scale(0.5);

opacity: 0.3;

}

75% {

transform: scale(0.8);

-webkit-transform: scale(0.8);

opacity: 0.5;

}

100% {

transform: scale(1);

-webkit-transform: scale(1);

opacity: 0.0;

}

}

@keyframes warn1 {

0% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.0;

}

25% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.1;

}

50% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.3;

}

75% {

transform: scale(0.5);

-webkit-transform: scale(0.5);

opacity: 0.5;

}

100% {

transform: scale(0.8);

-webkit-transform: scale(0.8);

opacity: 0.0;

}

}

.container {

position: relative;

width: 120px;

height: 120px;

left: 10px;

top: 10px;

}

/* 保持大小不变的小圆圈 */

.dot {

position: absolute;

width: 7px;

height: 7px;

left: 134px;

top: 134px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border: 1px solid #33ccff;

border-radius: 50%;

z-index: 2;

}

/* 产生动画(向外扩散变大)的圆圈 第一个圆 */

.pulse {

position: absolute;

width: 35px;

height: 35px;

left: 120px;

top: 120px;

border: 1px solid #3399ff;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

z-index: 1;

opacity: 0;

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

box-shadow: 1px 1px 30px #3399ff; /* 阴影效果 */

}

/* 产生动画(向外扩散变大)的圆圈 第二个圆 */

.pulse1 {

position: absolute;

width: 35px;

height: 35px;

left: 120px;

top: 120px;

border: 1px solid #3399ff;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

z-index: 1;

opacity: 0;

-webkit-animation: warn1 2s ease-out;

-moz-animation: warn1 2s ease-out;

animation: warn1 2s ease-out;

-webkit-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

animation-iteration-count: infinite;

box-shadow: 1px 1px 30px #3399ff; /* 阴影效果 */

}

实例四：由空心圆圈向四周扩散(无阴影)

css3动画圆波扩散效果

@keyframes warn {

0% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.0;

}

25% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.1;

}

50% {

transform: scale(0.5);

-webkit-transform: scale(0.5);

opacity: 0.3;

}

75% {

transform: scale(0.8);

-webkit-transform: scale(0.8);

opacity: 0.5;

}

100% {

transform: scale(1);

-webkit-transform: scale(1);

opacity: 0.0;

}

}

@keyframes warn1 {

0% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.0;

}

25% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.1;

}

50% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.3;

}

75% {

transform: scale(0.5);

-webkit-transform: scale(0.5);

opacity: 0.5;

}

100% {

transform: scale(0.8);

-webkit-transform: scale(0.8);

opacity: 0.0;

}

}

.container {

position: relative;

width: 120px;

height: 120px;

left: 10px;

top: 10px;

}

/* 保持大小不变的小圆圈 */

.dot {

position: absolute;

width: 7px;

height: 7px;

left: 134px;

top: 134px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border: 1px solid #33ccff;

border-radius: 50%;

z-index: 2;

}

/* 产生动画(向外扩散变大)的圆圈 第一个圆 */

.pulse {

position: absolute;

width: 35px;

height: 35px;

left: 120px;

top: 120px;

border: 1px solid #3399ff;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

z-index: 1;

opacity: 0;

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

}

/* 产生动画(向外扩散变大)的圆圈 第二个圆 */

.pulse1 {

position: absolute;

width: 35px;

height: 35px;

left: 120px;

top: 120px;

border: 1px solid #3399ff;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

z-index: 1;

opacity: 0;

-webkit-animation: warn1 2s ease-out;

-moz-animation: warn1 2s ease-out;

animation: warn1 2s ease-out;

-webkit-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

animation-iteration-count: infinite;

}

本文实例演示


http://www.niftyadmin.cn/n/1214171.html

相关文章

谨防raid数据丢失不当操作及raid数据恢复方法

谨防raid数据丢失不当操作及raid数据恢复方法

服务器往往是数据集中存储和管理的地方，在存储容量、存储安全和存储速度上都有一定的优势，正是由于这个优势，一个单位往往用服务器存储极其重要的数据，一旦服务器的数据丢失给用户带来的损失也非常惨重。下面我们就来看看如何防止…
阅读更多...
文字发光_炫彩霓虹风——你的PPT会发光

文字发光_炫彩霓虹风——你的PPT会发光

作者/七兮公众号/七兮PPT今天想介绍一个我认为还挺新奇有趣的一个效果——霓虹灯效果顾名思义就是将我们PPT里出现的元素打造成霓虹灯样式发着光的感觉~效果如下↓是不是有种酒吧门牌的感觉～霓虹灯效果能够营造非常特别的氛围。可能有同学好奇了，封面有发…
阅读更多...
固态硬盘数据恢复教您如何操作

固态硬盘数据恢复教您如何操作

固态硬盘，也就是简称的SSD盘，由于它具有传统机械硬盘不具备的快速读写、质量轻、能耗低以及体积小等特点，因此很多的电脑都使用了固态硬盘，但是，总有那么些意外发生，导致硬盘损坏，那么硬盘坏了可…
阅读更多...
删除多路径软件_软网推荐：增强删除 文件清理自动化

删除多路径软件_软网推荐：增强删除 文件清理自动化

Windows自带文件删除命令(DEL、ERASE和RD)，也提供了磁盘垃圾文件清理功能。但是，这些功能还相对有限，比如一些软件的安装要依靠临时文件夹下的某些文件，如果删除了会引起软件安装和使用问题。因此我们需要借助于其他工具来清理系统…
阅读更多...
推动边缘计算的七项核心技术

推动边缘计算的七项核心技术

年前施巍松教授和其团队（张星洲、王一帆、张庆阳）应《计算机研究与发展》编辑部之邀，庆刊60周年发表论文，边缘计算社区经过和施巍松教授沟通，将论文整理成几篇，方便大家阅读。字字珠玑，愿大家多…
阅读更多...
磁盘阵列恢复方法以及注意事项

磁盘阵列恢复方法以及注意事项

想要弄清楚磁盘阵列恢复，首先就得知道什么是磁盘阵列，磁盘阵列多用于存储服务器，数据服务器等企业级大数据存储领域，磁盘阵列是把多块独立的物理硬盘按不同方式组合起来形成一个逻辑硬盘，当磁盘瘫痪或硬件损坏后&#…
阅读更多...
python 读取geotiff_使用geotiff中的gdal python读取高程

python 读取geotiff_使用geotiff中的gdal python读取高程

如果您希望将所有高程值读取为numpy数组，则通常会执行以下操作：from osgeo import gdalgdal.UseExceptions()ds gdal.Open(test_data.tif)band ds.GetRasterBand(1)elevation band.ReadAsArray()print elevation.shapeprint elevationelevation 将是一…
阅读更多...
SQL数据库置疑数据怎么恢复

SQL数据库置疑数据怎么恢复

甲驭数据恢复中心经过多年对主流数据库文件结构的研究，成功开发出赤兔数据库碎片恢复软件。可以从磁盘和分区恢复丢失的数据库文件与数据库备份文件，包括(mdf，ndf，dat，bak文件)以及DBF ORA dmp,ibdata1 ibd myd&#x…
阅读更多...
最新文章

Copyright @ 2022~2023