⭐️本平台大量邀请,集团,公司,商家,个人,小记者,强势入驻,菲要趣只做优质的自媒体⭐️
    • 中文
    • 繁体
    • Englisn
  • Register
    • 查看作者
    • 纯代码的波浪效果css

      纯代码的波浪效果css

      <div class="waves-box"><div class="waves-inner">

      <h2>提供高性价比网站/小程序建设及品牌设计服务
      </h2>
      <p>收录国内外优秀WordPress插件主题及小程序源码,无需代码知识即可快速搭建网站,并提供品牌设计服务!</p>
      <a href="/wordpress">挑选WordPress主题</a>
      </div><div><svg class="waves"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"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></div>
      </div>

      代码就这些,我就分享一下,自个研究吧,别找我。这种是小白都会的

      样式代码回复可见~

      <style>
      /**/
      .waves-box {position:relative;text-align:center;background:linear-gradient(60deg,#05f 0%,#0bf 100%);color:white;}
      .waves-inner {height:360px;width:100%;margin:0;padding-top:115px;}
      .waves-inner h2{font-size2em;font-weightbold;letter-spacing2px;}
      .waves-inner p{padding10px;margin-bottom30px;}
      .waves-inner a{padding10px 28px;font-size1.2em;background#fff;color#09f;font-weightbold;border-radius: 50px;}
      .waves-inner a:hover{box-shadow: 0 5px 10px #05f;}
      .waves {position:relative;width:100%;height:15vh;margin-bottom:-7px;min-height:100px;max-height:150px;}
      .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);}
      }
      @media (max-width:768px) {
      .waves {height:40px;min-height:40px;}
      .waves-inner {padding-top:50px;}
      .mg-b {margin-bottom0;}
      }
      </style>
    • 0
    • 0
    • 0
    • 44
    • 请登录之后再进行评论

      Login
    • 发表内容
    • 做任务
    • 到底部