纯 CSS3 实现波浪效果

水深无声 2021-09-14 15:42 1100阅读 0赞

1.使用linear-gradient来做小波浪线

①原理:

linear-gradient(45deg, red, transparent 45%)  是个渐变

![SouthEast][]

②

.wave{
    			width: 20rem;
    		    height: 8px;
    		    background-size: 16px 16px;
    			background-repeat: repeat-x;
    			background-image: linear-gradient(135deg, transparent 45%, red 55%, transparent 60%),
    			linear-gradient(45deg, transparent 45%, red 55%, transparent 60%);
    		}
    		<div class="wave"></div>

2.圆圈中的水波

①.原理

![SouthEast 1][]

b.让上面这个图形滚动起来(rotate)

②

.wave {
    		    position: relative;
    		    width: 200px;
    		    height: 200px;
    		    background-color: rgb(118, 218, 255);
    		    border-radius: 50%;
    		}
    		.wave:before,.wave:after{
    	        content: "";
    	        position: absolute;
    	        width: 400px;
    	        height: 400px;
    	        top: 0;
    	        left: 50%;
    	        background-color: rgba(255, 255, 255, .4);
    	        border-radius: 45%;
    	        transform: translate(-50%, -70%) rotate(0);
    	        animation: rotate 6s linear infinite;
    	        z-index: 10;
    		}
    		     
    		.wave:after {
    	        border-radius: 47%;
    	        background-color: rgba(255, 255, 255, .9);
    	        transform: translate(-50%, -70%) rotate(0);
    	        animation: rotate 10s linear -5s infinite;
    	        z-index: 20;
    		}
    		
    		@keyframes rotate {
    		    50% {
    		        transform: translate(-50%, -73%) rotate(180deg);
    		    } 100% {
    		        transform: translate(-50%, -70%) rotate(360deg);
    		    }
    		}
    		<div class="wave"></div>

3. [用图片绘制波浪][Link 1]

[SouthEast]: /images/20210813/578b14ac023846998ab7f2ca538b14eb.png
[SouthEast 1]: /images/20210813/83dee12cac5a406a97f46eef70322141.png
[Link 1]: http://yanshi.sucaihuo.com/jquery/25/2562/demo/

发表评论取消回复

表情：

评论列表（有 0 条评论，1100人围观）

还没有评论，来说两句吧...

相关阅读

相关纯css3实现表格固定列效果

使用css3的sticky属性父元素不能overflow:hidden或者overflow:auto属性。必须指定top、bottom、left、righ

柔光的暖阳◎/ 2022年12月03日 02:20/ 0 赞/ 160 阅读

相关 157.纯CSS波浪段动画效果

效果 (源码网盘地址在最后) ![f3d695ff68925bc138926eb7029a8685.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来

水深无声/ 2022年10月20日 13:58/ 0 赞/ 184 阅读

相关纯css实现粒子效果

前端开发whqet,csdn,王海庆,whqet,前端开发专家好久没有更新的CSS3演武场系列，半年前搁浅的一篇文章赋予新年新气象闪亮登场了，研究一下利用css（sass）

小灰灰/ 2022年08月27日 10:49/ 0 赞/ 493 阅读

相关纯CSS实现3D翻牌效果

CSS3演武场继续CSS案例研究，今天来看一个纯CSS实现的3D翻牌效果。简易效果请大家狠戳这里[在线体验][Link 1]，或[下载收藏][Link 2]。改进效果请

待我称王封你为后i/ 2022年08月25日 08:36/ 0 赞/ 354 阅读

相关纯CSS实现3D折纸效果

今天继续来看一个纯CSS实现的[3D折纸效果][3D]，效果如下图。基于上一个效果《纯CSS实现图像3D悬停效果》而开发的，没有看过的童鞋欢迎[移步][Link 1]。本效

野性酷女/ 2022年08月25日 05:17/ 0 赞/ 264 阅读

相关纯CSS实现图像3D悬停效果

今天来看一个纯CSS实现的图像3D效果，请大家先到我的codepen里看看[效果][Link 1]，效果如下图所示。 ![SouthEast][] 左边为起始状态，右

男娘i/ 2022年08月25日 02:17/ 0 赞/ 208 阅读

相关纯 css 实现三角效果

之前写过一篇关于 border 如何实现一个三角形的方法，这一次，我们将在这个的基础上实现下面的效果： ![70][] 关于尺寸方面，自己看着来就行，无所谓的；

旧城等待，/ 2022年05月28日 07:25/ 0 赞/ 290 阅读

相关纯CSS3实现的标签效果

1.效果分析纯CSS3实现的标签效果，如图1所示，看看[demo][]。该标签主要有三个部分组成，左侧的三角形、右侧的圆角矩形和文字前面的小圆点。重点在左侧三角形和文字前面

浅浅的花香味﹌/ 2022年02月27日 01:17/ 0 赞/ 297 阅读

相关纯 CSS3 实现波浪效果

1.使用linear-gradient来做小波浪线 ①原理: linear-gradient(45deg, red, transparent 45%) 是个渐变

水深无声/ 2021年09月14日 15:42/ 0 赞/ 1101 阅读

相关纯css实现聚光灯效果

css还是蛮有意思的哦，效果啥的也不差，我给大家安利一个聚光灯效果，真的非常奈斯，效果如图：中间的圆圈是不断地移动的， ![20200505133652481.gi

柔情只为你懂/ 2021年07月26日 19:01/ 0 赞/ 457 阅读