zoukankan      html  css  js  c++  java
  • css 3 波浪特效

      /* Water  */
    @keyframes wave-animation-1{0%{background-position:0 top}100%{background-position:600px top}}@keyframes wave-animation-2{0%{background-position:0 top}100%{background-position:600px top}}
    
    .water {
      position: absolute;
      left: 0;
      bottom: 0px;
      height: 30px;
       100%;
      z-index: 1;
    }
    .water-c {
      position: relative;
    }
    .water-1, .water-2 {
      position: absolute;
       100%;
      height: 30px;
    }
    .water-1 {
      background: url(../addons/ewei_shopv2/static/images/water-1.svg) repeat-x;
      background-size: 600px;
      -webkit-animation: wave-animation-1 3.5s infinite linear;
      animation: wave-animation-1 3.5s infinite linear;
    }
    .water-2 {
      top: 0;
      background: url(../addons/ewei_shopv2/static/images/water-2.svg) repeat-x;
      background-size: 600px;
      -webkit-animation: wave-animation-2 6s infinite linear;
      animation: wave-animation-2 6s infinite linear;
    }

    <div class="water"><div class="water-c"><div class="water-1"></div><div class="water-2"></div></div></div>

     svg附件:https://files.cnblogs.com/files/jimz/water.zip

  • 相关阅读:
    图书-哲学-奥卡姆剃刀:《奥卡姆剃刀原理》
    汉语-词语-认知:认知能力
    汉语-词语-认知:认知水平
    汉语-词语:认知
    pg_dump
    pg_ctl
    pg_controldata
    pg_config
    paste
    passwd
  • 原文地址:https://www.cnblogs.com/jimz/p/8758924.html
Copyright © 2011-2022 走看看