• 注册
  • 聊天灌水 聊天灌水 关注:56 内容:2042

    给你的网站底部添加海浪动态背景效果教程

  • 查看作者
  • 打赏作者
  • 当前位置: 七七博客 > 聊天灌水 > 正文
    • 1
    • 聊天灌水
    • 给你的网站底部添加海浪动态背景效果教程

      教程正文

      1、建立一个div,id为wavesDIV,之后使用svg绘制一个图形出来,此时这个图形还是不会动的,我们需要使用animation来让他动起来。

      <div id="wavesDIV" style="display: block;">
              <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"></path>
                  </defs>
                  <g class="parallax">
                      <use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use>
                      <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use>
                      <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use>
                      <use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use>
                  </g>
              </svg>
          </div>

      2、CSS部分:使用@keyframes设定动画,使用animation调用

      #wavesDIV{
        position: fixed;
        bottom: 0;
        width: 100%;
        display:block;
        height:20vh;
        background-color:rgb(125,165,191);
        animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;
      }
      .waves { 
        position:relative; 
        width: 100%; 
        height:15vh; 
        margin-top:-15vh; 
        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); 
        } 
      }
      @keyframes move-out { 
        0% { 
          transform: translateY(400%); 
        } 
        100% { transform: translateY(0%); 
        } 
      }
      home.php?mod=space&uid=945662 (max-width: 768px) { 
        .waves { 
          height:40px; min-height:40px; 
        } 
      }

      3、当然如果在中间加多点,譬如说10%,20%,30%,40%,50%,60%,动态会更强烈

      Lv.6

      楼主辛苦了,谢谢楼主,楼主好人一生平安!

      回复

      请登录之后再进行评论

      登录
    • 任务系统
    • 帖子间隔 侧栏位置: