使用SVG实现，波浪效果

最新推荐文章于 2024-04-14 09:35:01 发布

weixin_42116704

最新推荐文章于 2024-04-14 09:35:01 发布

阅读量835

点赞数 2

分类专栏： html5+css3 文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_42116704/article/details/125392792

版权

直接上代码，文章最后有福利！

样式

<style type="text/css">
			body,
			html {
				margin: 0;
				padding: 0;
			}
			.footer{
				position: fixed;
				bottom: 0;
				left: 0;
			}
			svg:not(:root) {
			    overflow: hidden;
			}
			.editorial {
			    display: block;
			    width: 100%;
			    height: 5em;
			    max-height: 100vh;
			    /* margin-top: -101px */
			}
			.parallax>use {
			    animation: move-forever 12s linear infinite
			}
			
			.parallax>use:nth-child(1) {
			    animation-delay: -2s
			}
			
			.parallax>use:nth-child(2) {
			    animation-delay: -2s;
			    animation-duration: 5s
			}
			
			.parallax>use:nth-child(3) {
			    animation-delay: -4s;
			    animation-duration: 3s
			}
			@keyframes move-forever {
			    0% {
			        transform: translate(-90px,0)
			    }
			
			    100% {
			        transform: translate(85px,0)
			    }
			}
		</style>

html