zoukankan      html  css  js  c++  java
  • 花里胡哨的CSS集锦

    1.水波纹特效

    HTML

    <div is="page" id="home" data-role="page">
      <div is="content" role="main" class="ui-content">
        <div is="dragable" class="bg"></div>
      </div>
    </div>

    CSS

    html,body,#home,.ui-content{
      margin:0;
      padding:0;
      height:100%;
      100%;
      overflow:hidden;
      cursor:pointer;
    }
    .bg{
      100%;
      height:100%;
      background-image:url(https://pics.codecolor.cn/water-wave/bg.jpg);
      background-attachment:fixed;
      background-position:center center; 
      background-size:auto 100%;
    }
    .wave-position{
      position:absolute;
      300px;
      height:300px;
    }
    .wave-body{
      position:relative;
      100%;
      height:100%;
    }
    .wave{
      position:absolute;
      top:calc((100% - 30px)/2);
      left:calc((100% - 30px)/2);
      30px;
      height:30px;
      border-radius:300px;
      background:url(https://pics.codecolor.cn/water-wave/bg.jpg);
      background-attachment:fixed;
      background-position:center center;
    }
    .wave0{
      z-index:2;
      background-size:auto 106%;
      -webkit-animation:w 1s;
      -moz-animation:w 1s;
      animation:w 1s;
    }
    .wave1{
      z-index:3;
      background-size:auto 102%;
      -webkit-animation:w 1s .15s;
      -moz-animation:w 1s .15s;
      animation:w 1s .15s;
    }
    .wave2{
      z-index:4;
      background-size:auto 104%;
      -webkit-animation:w 1s .3s;
      -moz-animation:w 1s .3s;
      animation:w 1s .3s;
    }
    .wave3{
      z-index:5;
      background-size:auto 101%;
      -webkit-animation:w 1s .45s;
      -moz-animation:w 1s .45s;
      animation:w 1s .45s;
    }
    .wave4{
      z-index:6;
      background-size:auto 102%;
      -webkit-animation:w 1s .6s;
      -moz-animation:w 1s .6s;
      animation:w 1s .6s;
    }
    .wave5{
      z-index:7;
      background-size:auto 100%;
      -webkit-animation:w 1s .75s;
      -moz-animation:w 1s .75s;
      animation:w 1s .75s;
    }
    @-webkit-keyframes w{
      0%{
        top:calc((100% - 30px)/2);
        left:calc((100% - 30px)/2);
        30px;
        height:30px;
        opacity:1;
      }
      99%{
        opacity:1;
      }
      100%{
        top:calc((100% - 300px)/2);
        left:calc((100% - 300px)/2);
        300px;
        height:300px;
        opacity:0;
      }
    }
    @-moz-keyframes w{
      0%{
        top:calc((100% - 30px)/2);
        left:calc((100% - 30px)/2);
        30px;
        height:30px;
        opacity:1;
      }
      99%{
        opacity:1;
      }
      100%{
        top:calc((100% - 300px)/2);
        left:calc((100% - 300px)/2);
        300px;
        height:300px;
        opacity:0;
      }
    }
    @keyframes w{
      0%{
        top:calc((100% - 30px)/2);
        left:calc((100% - 30px)/2);
        30px;
        height:30px;
        opacity:1;
      }
      99%{
        opacity:1;
      }
      100%{
        top:calc((100% - 300px)/2);
        left:calc((100% - 300px)/2);
        300px;
        height:300px;
        opacity:0;
      }
    }
    

      

    js

    (function () {
      $(document).on('pageshow', '#home', function () {
        var mx, my, timer;
        var z = 2;
        $(document).on('click', function (e) {
          mx = e.pageX;
          my = e.pageY;
          z = z + 1;
          _wave(mx, my, z);
        });
    
        function _wave(i, j, k) {
          $('.ui-content').prepend(
            '<div class="wave-position water' + k + '" style="z-index:' + k + ';top:' + (j - 150) + 'px;left:' + (i - 150) + 'px;">' +
            '<div class="wave-body">' +
            '<div class="wave wave5"></div>' +
            '<div class="wave wave4"></div>' +
            '<div class="wave wave3"></div>' +
            '<div class="wave wave2"></div>' +
            '<div class="wave wave1"></div>' +
            '<div class="wave wave0"></div>' +
            '</div>' +
            '</div>'
          );
          setTimeout(function () {
            $('.water' + k).remove();
          }, 3000);
        }
      });
    })();
    

      

  • 相关阅读:
    小峰视频十三:二维数组
    小峰视频十二:java数组
    小峰视频十一:循环结构的跳出
    小峰视频十:循环while、for
    小峰视频九:选择语句if、switch
    小峰视频八:逻辑运算符、关系运算符、三门运算符
    小峰视频七:数据类型转换、数据运算
    eggjs+vue实现下载图片 js下载网络图片
    报错/Warning: You should not use <Route component> and <Route children> in the same route; <Route component> will be ignored
    React/事件系统
  • 原文地址:https://www.cnblogs.com/qiyan/p/10897884.html
Copyright © 2011-2022 走看看