纯 CSS3 实现波浪效果

水深无声 2021-09-14 15:42 1189阅读 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/