涟漪

实现效果

HTML代码

CSS代码

实现效果

HTML代码

<!DOCTYPE html>
<head><link rel="stylesheet" href="demo.css">
</head>
<body><div class="ripple-bg"><div class="ripple1"></div><div class="ripple2"></div><div class="ripple3"></div></div>
</body>
</html>

1. ripple-bg为波纹的中心点，该div元素不进行任何动画。

2. 这里用了三个div元素来实现多层涟漪的效果。

CSS代码

.ripple-bg {width: 80px;height: 80px;border-radius: 50%;background-color: rgb(0, 195, 255);margin: 300px auto;
}/* 共有样式 */
.ripple1, .ripple2, .ripple3{width: 80px;height: 80px;border-radius: 50%;background-color: rgb(0, 195, 255);
}/* 单独样式 */
/* 设置位置以及动画延迟 */
.ripple1 {animation: ripple-anim 3s ease-out 0s infinite;
}.ripple2 {position: relative;top: -80px;animation: ripple-anim 3s ease-out 1s infinite;
}.ripple3 {position: relative;top: -160px;animation: ripple-anim 3s ease-out 2s infinite;
}/* 动画效果 */
@keyframes ripple-anim {0% {transform: scale(0.5, 0.5);opacity: 1;}30% {opacity: 1;}100% {transform: scale(2, 2);opacity: 0;}
}

1. 类名为ripple1、ripple2和ripple3的div元素颜色应和父类元素相同；位置设置为relative，相对于父类元素进行调整，将三层涟漪的中心点与父类元素重合。

2. 为实现多层涟漪效果，ripple1、ripple2和ripple3的动画开始时间应不同，所以要设置延迟。

3. 在动画中，涟漪由小变大，在进行到100%时，要将透明度设置为0，涟漪消失。

《CSS实战案例汇总》涟漪相关推荐

【大数据AI人工智能】大数据处理实战案例汇总
大数据处理实战案例汇总本文总结了一系列大数据处理相关的实战案例,让你一目了然地了解大数据处理技术. 文章目录大数据处理实战案例汇总 1. 谷歌搜索引擎 2. Facebook实时动态 3. Net ...
实战案例汇总，Java架构师实战视频教程
很多人想进阶Java架构师,但确找不到正确的学习方法和资料,一直停留在原地,很是困惑.别慌,经过小编不懈的努力,终于为大家找到了这套最新最简洁最系统的进阶Java架构师的自学教程. 本教程资料通过真实 ...
Python实战案例汇总，带你轻松从入门到实战
Python 的火热,不仅让很多小白选手有了想学习的欲望,甚至连 BAT 的技术大牛,也将 Python 作为第二开发语言来提升自己. 虽然 Python 以简单易学著称,但是你知道如何快速学会 Py ...
html5页面结构案例,前端学习笔记（五）HTML+CSS静态页面实战案例：幸福西饼首页和百度首页...
按照知乎上面汪小黑推荐的前端学习路径,在自学了HTML和CSS之后,开始尝试实战制作静态页面小项目. 幸福西饼首页制作首先我在网上下载到了千锋教育提供的的幸福西饼官网静态页面的教学视频和图片素材.源 ...
Redis五大数据类型与使用场景汇总！！（含完整实战案例，建议收藏）
本文全面讲述了Redis的五大数据类型和使用场景,含完整实战案例,强烈建议收藏!! 大家好,我是冰河~~ 最近面试跳槽的小伙伴有点多,给我反馈的面试情况更是千差万别,不过很多小伙伴反馈说:面试中的大部 ...
Vue 组件间通信方式汇总，总有一款适合你( 附项目实战案例 )
前言前期分享的 200行纯前端Vue代码!教你写一个专属TodoList[零基础友好] 这个项目案例中使用的组件间通信方式是通过事件绑定与props 接收来实现的,具体使用方式将在下面进行详细介绍 ...
java json injection_JSON相关漏洞（Hijacking+Injection）挖掘技巧及实战案例全汇总
本文一是在为测试过程中遇到json返回格式时提供测试思路,二是几乎所有国内的资料都混淆了json和jsonp的区别--这是两种技术:以及json和jsonphijacking的区别--这是两个漏洞,这 ...
牛！Python 全栈必备的 150 个实战案例，一次性获得！
Python 全栈将是你升职加薪的硬通货. 我见过很多的 Python 讲解教程和书籍,它们大都这样讲 Python 的: 先从 Python 的发展历史开始,介绍 Python 的基本语法规则,Py ...
Linux 运维自动化之Cobbler实战案例
大纲一.前言二.Cobbler 工作原理详解三.Cobbler 常用命令汇总四.Cobbler 各种目录说明五.自定义Kickstart文件详解六.Cobbler 实战案例安装CentOS ...

《CSS实战案例汇总》涟漪

涟漪

实现效果

HTML代码

CSS代码

《CSS实战案例汇总》涟漪相关推荐

最新文章

热门文章