纯css3 svg 波浪底纹

最新推荐文章于 2024-04-13 08:35:03 发布

@曾经@

最新推荐文章于 2024-04-13 08:35:03 发布

阅读量709

点赞数 1

分类专栏： css3动画文章标签：纯css3 svg 波浪底纹

本文链接：https://blog.csdn.net/weixin_41628411/article/details/103307617

版权

css3动画专栏收录该内容

3 篇文章 0 订阅

订阅专栏

搞一个 css3 svg波浪底纹
svg外层的div（即容器壳不能丢掉position:relative;）
底纹的高度可根据自己需要修改.waves中的height


<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>css3 底纹波浪</title>
  <style>
  html,body{
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .Container{
    background-image: linear-gradient(to top, #fbad39 20%, #f3f0eb 80%);
    height: 100%;
    position: relative;
  }
  /* Animation */

  .parallax > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
  }
  .parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
  }
  .parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
  }
  .parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
  }
  .parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
  }
  @keyframes move-forever {
    0% {
    transform: translate3d(-90px,0,0);
    }
    100% { 
      transform: translate3d(85px,0,0);
    }
  }
  .waves {
    width: 100%;
    height:200px;
    min-height:200px;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
  </style>
</head>
<body>
<div class="Container">
    <!--Waves Container-->
    <svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
			<defs>
				<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
			</defs>
			<g class="parallax">
				<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
				<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
				<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
				<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
			</g>
		</svg>
	<!--Waves end-->
</div>
</body>
</html>

在这里插入图片描述

@曾经@

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
纯css3 svg 波浪底纹

搞一个 css3 svg波浪底纹svg外层的div（即容器壳不能丢掉position:relative;）底纹的高度可根据自己需要修改.waves中的height<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>css3 底纹波浪</...
复制链接

扫一扫

专栏目录