纯CSS实现波浪效果

最新推荐文章于 2022-08-13 15:56:02 发布
最新推荐文章于 2022-08-13 15:56:02 发布
阅读量1.3k 收藏 2
点赞数 1
分类专栏： web前端 文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40976321/article/details/99699596
版权

纯CSS实现波浪效果

步骤一：首先搭建好基本的布局样式

这里。Wava的长度设置为200%s是为了使用动画时能够更加好的展示。

步骤二：实现背景的透明度（实现渐变效果）

 

步骤三：使用绝对定位将三个波浪模块叠放在一起，并设置动画

在第二个模块中引入动画：animation: move_wave 10s linear infinite;

开始发生移动变化

动画在运行时，底部也会显示出来，这时我们要使用绝对定位让它往下面去，在运动之时不会显示出底部。

效果：

步骤四修改优化

将最外层的div定位到底部，之后添加一个背景颜色

对本教程有不清楚的，可以去看看项目源码

链接：https://pan.baidu.com/s/1m7hrutgB-BZta7PPcjmtAQ

提取码：rg64

Muchen灬
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS奇技淫巧之实现波浪效果
12-14
一直以来，使用纯 CSS 实现波浪效果都是十分困难的。 因为实现波浪的曲线需要借助贝塞尔曲线。 而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。 当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的。 下面先来看看非 CSS 方式实现的波浪效果 SVG 实现波浪效果 借助 SVG ，是很容易画出三次贝塞尔曲线的。 <svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text class="liquidFillGauge
纯CSS实现波浪移动效果的示例
09-24
纯CSS实现波浪移动效果是一种常见的网页动态设计技术，它能为页面增添视觉吸引力和动感。本文将深入探讨如何利用CSS来创建具有波浪效果的元素，并解释如何通过动画实现波浪的移动。 首先，我们要了解波浪效果的基本...
css实现波浪效果border-radius
weixin_43294560的博客
11-10 2023
波浪核心:让border-radius没到50%再滚动起来,再用其覆盖背景,背景设置overflow:hidden; 代码示例: div { position: relative; align-items: center; min-height: 100vh; background-color: rgb(118, 218, 255); overflow: hidden; } div::before, div::after { //生成两个borde
分享 19 个免费好用的 CSS 代码样式生成器工具
m0_67846661的博客
05-26 3552
文章标签：pythoncsshtmljavajavascript 版权 整理编辑 |杨小爱 CSS 生成器可以帮助每个开发人员的生活变得轻松，提升工作效率，因为它可以立即实现大部分 CSS 效果，如阴影、边框、按钮颜色/形状等等。 在本文中，我将分享 19个实用的 CSS代码生成器，每个开发人员都会发现它们在他们的日常工作中很有用。 01、Neumorphism.io 地址：https://neumorphism.io/#e0e0e0 有了它，我们可以立即为设计页面快速生...
《CSS实战案例汇总》波浪效果
热爱代码
04-26 588
HTML代码 <!DOCTYPE html> <head> <link rel="stylesheet" href="demo.css"> </head> <body> <div class="wave-bg"> <div class="wave1"></div> <div class="wave2"></div> ...
canvas和纯 CSS 实现波浪进度图
最新发布
12-21
纯 CSS 实现波浪效果（这里背景是蓝色静止的，运动是白色的椭圆形） 后面漂浮的波浪效果，其实就是利用了上面的 border-radius: 45% 的椭圆形，只是放大了很多倍，视野之外的图形都 overflow: hidden ，只留下了一条...
纯css3波浪音阶动画特效
07-24
【纯CSS3波浪音阶动画特效】是一种利用HTML5的结构元素和CSS3的动画特性，创造出的视觉上极具吸引力的动态效果。这个特效主要由一系列彩色的波浪形线条组成，它们随着时间的推移呈现出起伏波动的效果，仿佛是音乐的...
纯CSS3网页底部波浪动画特效
06-24
为了实现阶梯波浪效果，我们可以重复这个过程，创建多个波浪元素，每个都有不同的动画延迟和速度，这样就可以在时间上错开，形成间隔的效果。通过调整这些参数，我们可以控制波浪的密度、频率和节奏，使其更符合设计...
CSS实现波浪线
今天也要学习！！的博客
08-13 2492
css3线性渐变实现波浪线
纯css实现水波流动效果
wuliyouMaozhi的博客
08-07 4360
纯css实现水波流动效果：先实现一个装水的容器，可以通过box-shadow给容器增添点厚度的感觉 水的实现，其实就是一个纯色的背景 接下来就是波纹的实现 思考下现有的css属性可以有这样的效果吗？ 答案是否定的，那我们怎样通过dom+css来实现这样的效果呢？ 我们可以看到波纹的行动轨迹是有规律的，再仔细观察后会发现其实每四个小周期是一个循环，每四个小周期之后的动画都是固定的.........
CSS渐变背景看这一篇就够了
热门推荐
Mq_sir的博客
11-01 6万+
CSS渐变背景看这一篇就够了 在我们自己设计网页的时候，为了好看美观，颜色可谓是最让人头疼的一部分。尤其是在配色上又找不到一些好看的网站。今天我就来记录一些好看的渐变式背景，和一些常用的颜色网站。 CSS 渐变使可以显示两种或多种指定颜色之间的平滑过渡。让我们来玩一玩，看能玩出什么花来。 CSS 定义了两种渐变类型： 一、线性渐变（向下/向上/向左/向右/对角线） 我们通过属性 linear-gradient来这样定义一个线性渐变。 background-image: linear-gradient( 方向
纯 CSS 实现波浪效果！
diaoleiluomulaojin的博客
08-07 3019
而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。     当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的，先看看，非 CSS 方式实现的波浪效果。     使用 SVG 实现波浪效果     借助 SVG ，是很容易画出三次贝塞尔曲线的。     看看效果：     代码如下：         50.0%        
css3 实现波浪（wave）效果
weixin_30377461的博客
12-27 950
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt...
使用纯css实现波浪效果
weixin_30381793的博客
09-29 280
有时候我们需要实现水晃动的效果，其实我们可以通过css旋转动画和圆角来实现。 首先来2个div,外层div相对定位，内层div绝对定位，内层div大致位于外层div上半部分。外层div设置一个颜色较深的背景色（水的颜色）;内层div颜色设置为白色，加上圆角，圆角建议30%-45%之间，然后加上无限循环的旋转动画，通过内层div的旋转来实现波浪效果。 参考代码如下： <style>...
【前端】CSS3、Canvas、SVG等5种方式实现水波纹波浪动画特效
zhichaosong的博客
07-06 1万+
欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I...
纯CSS实现水波纹效果
太空编程
01-04 1603
首先我们从结构和样式两个方面来讲解以上动图的实现过程：Html结构：<div class="square"> <span></span&...
CSS3效果：波浪效果
weixin_34216036的博客
05-22 327
实现效果 如图所示： 首先得准备三张图，一张是浅黄色的背景图loading_bg.png，一张是深红色的图loading.png，最后一张为bolang.png。 css代码 body{background:#ffe894;} .loading_bg{width:113px; height:111px;background:url(loading_bg.png) no-repea...
html中实现图片的无限滚动,CSS3 背景图片无限滚动之波浪效果的实现
weixin_30970867的博客
06-04 777
效果HTMLbody{background:#2f2e34;}.a,.b,.c{width:100%;height:240px;position:absolute;bottom:0;}.a{background:url(top1.png)0bottomrepeat-x;background-size:100%140px;-webkit-animation:anim...
css 波浪动画
Tianxiaoxixi的博客
07-02 298
css 波浪动画
css实现波浪球效果图,用css实现圆形波浪效果图
06-10
要实现圆形波浪效果图，可以使用 CSS 的 `border-radius` 属性和伪元素 `::before` 和 `::after`。下面是一个简单的示例： ```html <div class="wave"></div> ``` ```css .wave { position: relative; width: 200px; height: 200px; background-color: #00bfff; border-radius: 50%; } .wave::before, .wave::after { content: ""; position: absolute; width: 200px; height: 200px; background-color: #fff; border-radius: 50%; top: -20px; z-index: -1; } .wave::before { left: -20px; transform: translateX(-50%); } .wave::after { right: -20px; transform: translateX(50%); } ``` 在上面的示例中，我们首先创建了一个宽高为 200px 的圆形元素 `.wave`，并设置了背景颜色和圆角半径。接着，我们使用伪元素 `::before` 和 `::after` 创建两个白色的圆形元素，宽高与 `.wave` 相同，并设置了圆角半径和位置。通过 `top`、`left` 和 `right` 属性，我们将它们分别放置在左上角、右上角和右下角。 最后，我们通过 `transform` 属性对 `::before` 和 `::after` 进行位移，从而实现波浪的效果。你可以根据需要调整位移的值和白色圆形的大小来实现不同的波浪效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值