如何用css实现波纹动画效果

波纹效果可以用css的 animation 动画来实现，animation 相比单纯用 transform 能实现更为复杂的效果。

效果图：

下面三张图分别为原图、效果图和去掉背景图片后的效果图，虽然可能效果图中的“波纹”颜色比较浅，但是并不妨碍最终完成动画效果。

实现思路：

1 先写一个圆形的div（调整宽高和边框角度即可）作为波纹中心，写这个波纹中心主要是作为父盒子，并把这个波纹中心定位到背景中某个位置。

2 在这个波纹中心内，再写三个同心的圆形盒子（绝对定位居中即可），作为波纹

3 给这三个波纹盒子设置有颜色的边框，并且添加 animation 动画效果，然后分两到三步让波纹盒子宽高逐渐变大，并且让波纹盒子透明度从1到最终变为0，然后就会有一种波纹淡开的效果了。可是因为动画是同时开始的，所以看到的动画可能没有太多层次感，还需要最后的调整。

4 给这三个波纹盒子的动画设置不同的延迟开始时间，并且将动画设置为不断循环进行。

5 这样就能看到真正的波纹效果了。

具体代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body>div {position: relative;overflow: hidden;width: 480px;height: 318px;background: url("../images/气功.jpg") no-repeat;}body div[class^="attack"] {position: absolute;background-color: white;}body div .attack1 {width: 73px;height: 73px;border-radius: 73px;top: 227px;left: 81px;}body div .attack2 {width: 71px;height: 71px;border-radius: 71px;top: 83px;left: 209px;}body div .attack3 {width: 65px;height: 65px;border-radius: 65px;top: 91px;left: 421px;}@keyframes move {0% {width: 65px;height: 65px;border-radius: 65px;box-shadow: 0 0 0 2px #ABF8F4;}50% {opacity: 1;}100% {width: 120px;height: 120px;border-radius: 120px;box-shadow: 0 0 0 2px #ABF8F4;opacity: 0;}}body div[class^="pulse"] {position: absolute;top: 50%;left: 50%;width: 65px;height: 65px;border-radius: 65px;/* border: #ABF8F4 solid 2px; */transform: translate(-50%, -50%);animation-name: move;animation-duration: .8s;animation-iteration-count: infinite;}body div .pulse2 {animation-delay: 0.2s;}body div .pulse3 {animation-delay: 0.4s;}</style>
</head><body><div><div class="attack1"><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div><div class="attack2"><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div><div class="attack3"><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div></div>
</body></html>

如何用css实现波纹动画效果相关推荐

css波纹动画在移动端,利用css实现波纹动画效果实例
效果图如下实例代码如下 body{ background: #000; } .box{ width: 100%; height: 600px; background: #000; } .vr { d ...
CSS 实现图片旋转和水波纹动画效果
CSS 实现图片旋转和水波纹动画效果背景通过 CSS 动画实现图片旋转和水波纹动画效果,并做成 Vue 组件,方便以后复用. 代码 <template><view class=& ...
CSS实战 - 波纹扩散效果
1.实现效果效果一:涟漪扩散效果效果二:波动扩散效果 2.实现原理在 div 里定义圆形,使用 css 的动画,让圆形的大小由小到大进行变化. ① 涟漪扩散: 定义了3个带边框的空圆,让这3个圆 ...
CSS实现文字动画效果
今天来到了我们的第20个小项目的练习,距离我们100个小项目的练习,我们已经完成了五分之一了,剩下的五分之四,我们一起加油练习. 今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加 ...
css有哪些动画效果怎么实现的
css常见的动画效果:平移,缩放,旋转 css实现动画主要有三种方式: transition实现渐变动画 transform实现缩放平移效果动画 animation实现自定义动画 transition ...
CSS实现文字动画效果【每日一题】
今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加载时的效果,现在,我们一起来看一下这个项目的最终效果: HTML代码: <!DOCTYPE html> <htm ...
HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白
HTML5纯css实现爱心动画效果DW来自程序员的浪漫表白一.拉面版 css部分 *{/* 初始化页面元素内外边距*/margin:0;padding: 0;}body{/* 弹性布局元素垂直水平居 ...
css玻璃雨滴效果,CSS实现雨滴动画效果的实例代码
玻璃窗今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. .window { position: absolute; width: 10 ...
使用HTML和CSS的明信片动画效果
使用HTML和CSS的明信片动画效果教程地址:原文地址(YouTube) B站教程:原文转载(bilibili) 两个视频的内容相同,第二个为转载效果图代码区 html <div clas ...

如何用css实现波纹动画效果

如何用css实现波纹动画效果相关推荐

最新文章

热门文章