纯 CSS3 实现波浪效果

最新推荐文章于 2024-08-31 09:27:14 发布

面条请不要欺负汉堡

最新推荐文章于 2024-08-31 09:27:14 发布

阅读量8.8k

点赞数

分类专栏： css3 文章标签：纯 CSS3 实现波浪效果

本文链接：https://blog.csdn.net/gao_xu_520/article/details/79201760

版权

css3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

①原理:

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

②

.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.圆圈中的水波

①.原理

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. 用图片绘制波浪