CSS 动画（圆圈荡漾+波浪图）

动画一：圆圈荡漾

用途：常用于提示用户去点击或勾选

<div style="margin: 30px auto; width: 300px"><i class="circleRipple"></i><span style="margin-left: 30px">圈圈荡漾</span>
</div>

/* 圆圈荡漾 circleRipple*/.circleRipple{position: relative;display: inline-block;width: 14px;height: 14px;border: 1px solid #ddd;border-radius: 50%;&:after{content: ''; /* 注：before,after伪类必须加 content:'';*/position: absolute;width: 26px;height: 26px;left: -7px;top: -7px;border: 4px solid #0093DD;border-radius: 30px;z-index: 1;opacity: 0;-webkit-animation: ripple 3s ease-out infinite;-moz-animation: ripple 3s ease-out infinite;animation: ripple 3s ease-out infinite;}}
/* 荡漾动画 ripple*/@keyframes ripple {0% {transform: scale(0);opacity: 0;}25% {transform: scale(0);opacity: .1;}50% {transform: scale(.1);opacity: .3;}75% {transform: scale(.5);opacity: .5;}100% {transform: scale(1);opacity: 0;}}@-webkit-keyframes ripple {0% {-webkit-transform: scale(0);opacity: 0;}25% {-webkit-transform: scale(0);opacity: .1;}50% {-webkit-transform: scale(.1);opacity: .3;}75% {-webkit-transform: scale(.5);opacity: .5;}100% {-webkit-transform: scale(1);opacity: 0;}}

动画二：波浪图

用途：常用于提示用户去点击路由跳转或弹出框

<div class="wave"><p class="title"><span>数据</span><span>共享申请</span></p><div class="wave1"></div><div class="wave2"></div><div class="wave3"></div>
</div>

.wave {position: relative;width: 260px;height: 260px;border-radius: 10px;overflow: hidden;background: #fff;box-shadow: 0 0 10px rgba(58, 160, 255, 0.5);font-size: 0;cursor: pointer;flex-shrink: 0;animation: water-wave linear infinite;}.wave1 {display: block;position: absolute;top: 50%;left: -30%;background: #3aa0ff;opacity: 0.7;width: 200%;height: 200%;border-radius: 40%;animation: inherit;animation-duration: 5s;}.wave2 {display: block;position: absolute;top: 50%;left: -40%;background: #319bff;opacity: 0.7;width: 200%;height: 200%;border-radius: 35%;animation: inherit;animation-duration: 7s;}.wave3 {display: block;position: absolute;top: 60%;left: -40%;background: #1888fc;opacity: 0.3;width: 200%;height: 200%;border-radius: 33%;animation: inherit;animation-duration: 11s;}@keyframes water-wave {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}

CSS 动画（圆圈荡漾+波浪图）相关推荐

＜CSS3练习＞ CSS动画综合案例热点图（含素材）
CSS动画分为两个步骤: 1.先定义动画 2.再调用动画语法如下 1.定义: @keyframs 动画名称 {from(0%){}to(100%){}} 这里的数字可以从0%~100% 可以任意代 ...
CSS animation动画效果实现精灵图、雪碧图动画，多动画应用
CSS animation动画效果实现精灵图.雪碧图动画,多动画应用素材下载分析图片动画过程图片可以分成4*6=24 小图片也就是24帧方法1 可以把每一行成一个动画,所以可以拆分4个动画方 ...
css动画（详解带图）
css动画过渡过渡 (transition)的作用常用属性实例动画动画的简介设置关键帧动画常用属性实例变形变形(transform)的简介常用属性(transform) Z轴平 ...
CSS 动画相关属性动态实例大全（82种），2023年祝福第二弹（送你一只守护兔）(下），守护兔源代码免费下载
2023年春节祝福第二弹--送你一只守护兔(下) CSS 动画相关属性动态实例大全(82种).守护兔源代码免费下载本文目录: 五.CSS3 动画相关属性实例大全 (1).CSS3的动画基本属性 (2 ...
肝了两宿才收集的17个超炫酷的 CSS 动画加载与进度条特效，绝对值得收藏！！！
文章目录一.圆形加载动画二.上下跳动的圆球加载动画三.3D立体加载动画四.饼图加载动画五.多色圆点波动效果的加载动画六.制作顺时针放大的圆圈加载动画七.制作小圆圈轮流放大的加载动画八. ...
在html5中关键帧属性的描述,CSS动画属性关键帧keyframes全解析
大概有多久没有更新专栏文章了.半年?下半年忙到起飞,或者毫不夸张的说是发射?仅有的一点个人时间,上半年贡献给了Python,现在差不多已忘掉了七七八八(一首<凉凉>送给自己),下半年贡献给 ...
盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
html和css动画效果,css过渡和css动画的区别是什么？
CSS3中出现很多新的特性,其中比较好玩的3D操作就是:过渡和动画效果.那么css过渡和css动画的区别是什么?下面本篇文章就来给大家介绍一下CSS中过渡和动画的区别,希望对大家有所帮助. css过渡 ...
arcgis for js 画圆圈(会跟地图一起缩小)，而不是打点然后加半径的圆点(不会缩小)，制作打卡功能选点。可以点击地图自动画圆圈
先贴图找了好久的gis画圆方法,终于实现了,之前都是画的圆点,加上半径,会随着地图放大. 我的这个圆圈是贴地的不会放大xixi~ 网上找的画圆圈都是3.X的版本,在我这里实现不了. 我是用的arcg ...

CSS 动画（圆圈荡漾+波浪图）

动画一：圆圈荡漾

动画二：波浪图

CSS 动画（圆圈荡漾+波浪图）相关推荐

最新文章

热门文章