花里胡哨的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%;
  width:100%;
  overflow:hidden;
  cursor:pointer;
}
.bg{
  width: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;
  width:300px;
  height:300px;
}
.wave-body{
  position:relative;
  width:100%;
  height:100%;
}
.wave{
  position:absolute;
  top:calc((100% - 30px)/2);
  left:calc((100% - 30px)/2);
  width: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);
    width:30px;
    height:30px;
    opacity:1;
  }
  99%{
    opacity:1;
  }
  100%{
    top:calc((100% - 300px)/2);
    left:calc((100% - 300px)/2);
    width:300px;
    height:300px;
    opacity:0;
  }
}
@-moz-keyframes w{
  0%{
    top:calc((100% - 30px)/2);
    left:calc((100% - 30px)/2);
    width:30px;
    height:30px;
    opacity:1;
  }
  99%{
    opacity:1;
  }
  100%{
    top:calc((100% - 300px)/2);
    left:calc((100% - 300px)/2);
    width:300px;
    height:300px;
    opacity:0;
  }
}
@keyframes w{
  0%{
    top:calc((100% - 30px)/2);
    left:calc((100% - 30px)/2);
    width:30px;
    height:30px;
    opacity:1;
  }
  99%{
    opacity:1;
  }
  100%{
    top:calc((100% - 300px)/2);
    left:calc((100% - 300px)/2);
    width: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(
        '
' +
        '
' +
        '
' +
        '
' +
        '
' +
        '
' +
        '
' +
        '
' +
        '
' +
        '
'
      );
      setTimeout(function () {
        $('.water' + k).remove();
      }, 3000);
    }
  });
})();

 

　　

 

转载于:https://www.cnblogs.com/qiyan/p/10897884.html