htmlsvg波浪,svg+css3做一个动感的波浪效果

作者：林筱杏-HA | 来源：互联网 | 2023-08-20 14:09

一根矢量的波浪完整代码：dM420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5

一根矢量的波浪

完整代码&＃xff1a;

d&＃61;"M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z">

d&＃61;"M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z">

d&＃61;"M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z">

d&＃61;"M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z">

d&＃61;"M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z">

d&＃61;"M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z">

d&＃61;"M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z">

d&＃61;"M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z">

.circle-countdown {

width: 441px;

height: 441px;

position: relative;

top: 0;

left: 0;

padding: 2.5rem;

border: 1px solid #fb64b6;

border-radius: 50%;

overflow: hidden;

}

.wave-animation {

overflow: hidden;

}

.wave-animation__percent {

position: absolute;

left: 0;

top: 0;

z-index: 3;

width: 100%;

height: 100%;

display: flex;

display: -webkit-flex;

align-items: center;

justify-content: center;

color: #fff;

font-size: 64px;

}

.wave-animation__water {

position: absolute;

left: 0;

top: 0;

z-index: -1;

width: 100%;

height: 100%;

/* 调整这里的60%就可以改变进度&＃xff0c;波浪高低 */

transform: translate(0, calc(100% - 60%));

background: #f852d6;

transition: all 2s;

}

.wave-animation__water-wave {

width: 200%;

position: absolute;

bottom: 100%;

}

.wave-animation__water-wave--back {

right: 0;

fill: #1d1d1d;

animation: wave-back 1.4s infinite linear;

}

.wave-animation__water-wave--front {

left: 0;

fill: #f852d6;

margin-bottom: -1px;

animation: wave-front 0.7s infinite linear;

}

&＃64;keyframes wave-front {

100% {

transform: translate(-50%, 0);

}

&＃64;keyframes wave-back {

100% {

transform: translate(50%, 0);

}

bVbuoUA?w&＃61;573&h&＃61;554

推荐阅读

function
css 回到顶部按钮

本文由编程笔记#小编为大家整理，主要介绍了css回到顶部按钮相关的知识，希望对你有一定的参考价值。 ... [详细]

蜡笔小新 2023-10-17 13:38:49
list
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
function
CSS3 animation动画属性详解及用法

本文详细介绍了CSS3 animation动画的各种属性及用法，包括关键帧动画、动画名称、动画时间、动画曲线、动画延迟、动画播放次数、动画状态和动画前后的状态等。通过本文的学习，读者可以深入了解CSS3 animation动画的使用方法。 ... [详细]

蜡笔小新 2023-12-11 08:47:46
function
常用的CSS属性及用法整理

本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]

蜡笔小新 2023-12-09 03:01:43
function
Android开发笔记：使用Picasso加载网络图片等比例缩放

在Android开发中，使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法，并提供了具体的代码实现。通过获取图片的宽高，计算目标宽度和高度，并创建新图实现等比例缩放。 ... [详细]

蜡笔小新 2023-12-14 17:34:00
function
高质量SQL书写的30条建议

本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]

蜡笔小新 2023-12-13 13:24:33
list
使用圣杯布局模式实现网站首页的内容布局

本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法，包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]

蜡笔小新 2023-12-10 20:09:23
header
HTML中表格的页眉页脚布局解决方案

本文介绍了在HTML中实现表格的页眉页脚布局的解决方案。通过基本的HTML/CSS技术，避免使用内联样式和固定定位，实现了一个标准的页眉页脚布局。提供了一个替代的解决方案，为读者提供了参考。 ... [详细]

蜡笔小新 2023-12-10 15:50:47
header
CSS中的包裹性

之前一直都知道css中的部分元素具有包裹性，今天写博客的时候正好也遇到了一个，所以想总结一下，有错误的地方欢迎指出来。什么是包裹性？包裹性就是父元素的宽度会收缩到和内部元素宽度一样 ... [详细]

蜡笔小新 2023-10-17 20:09:31
input
org.apache.pig.backend.executionengine.ExecException.()方法的使用及代码示例

本文整理了Java中org.apache.pig.backend.executionengine.ExecException.<init>()方法的一些代码 ... [详细]

蜡笔小新 2023-10-17 14:26:45
input
实例详解CSS3实现弹幕

项目需要实现弹幕，网上参考了各种方法，最后觉得transform+transition实现的效果在移动设备上性能最好，在iphone6和红米4上测试，看不到 ... [详细]

蜡笔小新 2023-10-17 12:33:46
list
mintui中的下拉加载，可以一直加载数据，怎么处理呢？

html结构 ... [详细]

蜡笔小新 2023-10-17 10:44:03
list
为什么三角形与菜单背景的颜色不同？ - Why is the triangle a different colour shade to the menu background?

Imnotunderstandingastowhythetrianglewhichappearswhenthemousehoversoverthemenuitem, ... [详细]

蜡笔小新 2023-10-16 11:26:13
list
基于SVG的票面设计器开发总结

今天周六，原则上要休息，但想到下周还有一堆任务，还是先做一部分工作吧，就把之前做的票面设计器改了改，增加了上传图片和更换背景底图的功能。现在打算整理下这个设计器，也算对齐一个总结。不过这属于我们部门的 ... [详细]

蜡笔小新 2023-10-15 15:58:07
list
webui之常用js操作（webui界面是什么）

本文目录一览：1、web前端开发需要掌握的几个必备技术 ... [详细]

蜡笔小新 2023-10-14 13:07:07

林筱杏-HA

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章