html边框波浪,纯 CSS 实现波浪效果!

本文介绍了如何使用纯CSS来创建波浪效果,包括SVG和Canvas实现波浪的原理,然后重点展示了通过CSS动态改变边框半径模拟波浪动画的技巧,提供了一个巧妙的解决方案来创建波浪背景和波浪进度图。
摘要由CSDN通过智能技术生成

原标题:纯 CSS 实现波浪效果!

一直以来,使用纯 CSS 实现波浪效果都是十分困难的。

因为实现波浪的曲线需要借助贝塞尔曲线。

7e804fc100ddc367f64a4eb54283e856.png

而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法。

当然,借助其他力量(SVG、CANVAS),是可以很轻松的完成所谓的波浪效果的,先看看,非 CSS 方式实现的波浪效果。

使用 SVG 实现波浪效果

借助 SVG ,是很容易画出三次贝塞尔曲线的。

看看效果:

313dfc1de5be8049f89f791de3a01dd3.gif

代码如下:

50.0%

M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;

M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z">

画出三次贝塞尔曲线的核心在于 这一段。感兴趣的可以自行去研究研究。

使用 canvas 实现波浪效果

使用 canvas 实现波浪效果的原理与 SVG 一样,都是利用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值