css 背景水波纹、堆叠铺开效果

最新推荐文章于 2024-07-14 13:35:37 发布
最新推荐文章于 2024-07-14 13:35:37 发布
阅读量460 收藏
点赞数
分类专栏： 我有奇妙动画 文章标签： css css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43294560/article/details/121543291
版权
本文介绍了如何使用HTML和CSS创建波纹动画效果。通过堆叠div并应用背景图片，结合动画延迟，模拟水波逐个收缩展开，形成波纹的视觉效果。透明波纹利用fixed背景属性实现平滑过渡。文章还展示了两种不同的展示方式：水波纹和堆叠铺开。
摘要由CSDN通过智能技术生成 
波纹:
	多个div堆叠,使用同一张背景图片,通过动画延迟,逐个收缩展开,产生波浪的每个圈
	通过展开后依次振幅减小,来模拟真实振幅,振幅通过设置背景图高宽大小,设置依次背景图的高宽差距减少即可

透明波纹:
	设置background-attachment:fixed;	个人理解:因为fixed背景图固定,所以只是伸缩的区别,否则就是背景会随着内容变化,造成轮廓明显
	不设置则为堆叠铺开的效果

效果图:
水波纹:
在这里插入图片描述

在这里插入图片描述

堆叠铺开:
在这里插入图片描述
在这里插入图片描述

神奇大叔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3水波纹混合背景元素动画特效
06-11
这是一款基于css3 @keyframes属性绘制的水波纹混合背景元素动画特效，水滴落下激起水波纹动画效果。
水波加载动画 html+css
热门推荐
你好呀，很高兴你在看这里~
12-26 1万+
先看效果： 原理： 这个效果在网上挺常见的，所以我也写篇文章记录记录。 原理是比较简单的，大致上就是有一个背景色为蓝色的圆形；然后圆形上面有一个或两个有弧度的白色方形盒子在旋转，通过白色遮住蓝色形成像是波浪的视差。 实现： 1.定义两盒子，quan就是那个圆形，shui就是圆里蓝色的背景； <div class="quan"> <div class="shui"></div> </div> 2.基本样式，这样大致上就是得到一个蓝色背景
使用css3实现【水波纹扩散效果】
最新发布
xixixixixixixi21的博客
07-14 755
在CSS3中，我利用::before和::after伪元素以及动画（animation）来创建一个简单的水波纹扩散效果。.wave-effect容器设置了绝对定位，并给它的背景设置了一个线性渐变，同时应用了一个名为wave的动画，模拟了水波向右平移然后回溯的效果。
css实现水波纹效果
zhanghuaiwei
11-23 2081
css实现水波纹效果
有趣的css - 水波纹加载动画
设计师工作日常
05-15 1298
使用 css 模拟一个丝滑的水波纹加载效果。
CSS3图片层叠展开特效 可展开扇形效果
08-23
今天要分享的这款CSS3图片特效没有那么绚丽，它的功能非常简单，当你把鼠标移到图片上时，多张图片便会由原先的叠在一起变成展开状态，展开过程中伴随CSS3动画，展开的形状是扇形。这款简单的CSS3图片层叠展开动画可以应用在图片展示和图片分享上。
css实现水波纹loading效果
04-01
CSS不仅可以控制页面布局，还可以实现丰富的动态效果，比如我们这里关注的“水波纹loading效果”。这种效果通常用于网页加载时提供视觉反馈，展示数据正在加载的过程，既美观又实用。 首先，我们要理解“水波纹”...
CSS3 3D卡片堆叠图片特效
06-24
CSS3 3D卡片堆叠图片特效是一款鼠标悬停交互式图片堆叠图片列表布局特效。
纯CSS3石子打水波纹动画特效
07-24
在这个案例中，“纯CSS3石子打水波纹动画特效”就是一个很好的实例，利用CSS3的关键帧动画（keyframes）属性，实现了模拟石子投入水面后产生的涟漪效果。这个特效可以为网页增加生动性和互动感，尤其适用于自然、...
HTML5 SVG水波纹背景图形特效
07-14
总结起来，HTML5 SVG水波纹背景图形特效是通过SVG的路径元素和CSS3的滤镜与动画特性相结合来实现的。通过熟练掌握SVG的基本语法和动态效果的实现方法，开发者可以创造出更多富有创意和互动性的网页背景图形。在这个...
纯CSS3水波纹混合元素动画特效特效代码
03-20
【CSS3水波纹混合元素动画特效】是一种利用现代浏览器对CSS3的广泛支持，创建出具有视觉吸引力的动态背景效果。此特效的核心是通过@keyframes规则来定义动画的关键帧，结合CSS3的transform和opacity等属性，模拟出...
使用CSS实现逼真的水波纹点击效果
12-03
这篇文章特别介绍如何使用CSS来完成水波纹的效果。 div的层层叠叠 虽然webkit具有遮罩的能力（webkit mask），不过webkit虽然强大，但在跨浏览器上总是它的罩门，况且在性能上也是往往会造成困扰（这也是为什么chrome要这么吃资源了），因此撇开webkit不谈，我们该用什么方法，才可以做出水波纹的效果呢？答案就是用“叠”的方式，这个水波纹效果的原理其实就是用六个div叠在一起，接着最重要的就是将背景设为固定：background-attachment:fixed；，然后让背景的尺寸有大有小，就可以完成了，只要把六个div叠在一起，搭配CSS的animation，就可以让六个
CSS3实现水波纹扩散效果
lwaner的博客
07-06 2252
效果代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-casle=1.0,user-scalable=no" /> <title>圆点扩散</title> <style type="text/css"> body
图片+css实现波浪
slender_jing的博客
11-19 3047
概述 这周的作业有一个登录页面里面需要实现波浪的动画，在网上学了一下，现在进行一下波浪动画实现的总结（主要记录总结我自己使用的波浪动画）。 波浪特效有主要三种实现方法：纯css实现、js实现、图片+css实现 实现及过程（图片实现波浪特效） html &amp;amp;lt;div class=&amp;quot;waveWrapper waveAnimation&amp;quot;&amp;amp;gt; &amp;amp;lt;div clas
纯css实现水波流动效果
wuliyouMaozhi的博客
08-07 4508
纯css实现水波流动效果：先实现一个装水的容器，可以通过box-shadow给容器增添点厚度的感觉 水的实现，其实就是一个纯色的背景 接下来就是波纹的实现 思考下现有的css属性可以有这样的效果吗？ 答案是否定的，那我们怎样通过dom+css来实现这样的效果呢？ 我们可以看到波纹的行动轨迹是有规律的，再仔细观察后会发现其实每四个小周期是一个循环，每四个小周期之后的动画都是固定的.........
使用CSS3设置条纹背景
CH_Y的博客
10-25 2886
我们在编写网页中如果想使用条纹图案作为背景，在不使用svg等图片的前提下，可以使用CSS创建条纹图案背景。
css 滚动视差 之 水波纹效果
anhuyong5631的博客
04-19 572
核心属性： background-attachment 这个属性就牛逼了， 它可以定义背景图片是相对视口固定， 还是随着视口滚动， 加上这个属性网页瞬间就从屌丝变成 高大上。 我们来看个例子： html: <div class="attach view"></div> <div class="text view">I WANT FLY...
css 实现水波纹效果
07-25
要实现水波纹效果，可以使用CSS的伪元素和动画来实现。下面是一个简单的示例代码： HTML: ```html <div class="ripple"></div> ``` CSS: ```css .ripple-container { position: relative; width: 200px; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值