css 持续的涟漪效果,css3点击涟漪效果

Document

html {

background-color: #eeedef;

}

#container {

position: absolute;

top:50%;

left:50%;

margin-right: -50%;

opacity:0.9;

transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);

}

.paper {

background-color: #fffeff;

width: 500px;

height: 100px;

overflow: hidden;

position: relative;

margin-bottom: 16px;

box-shadow: 0px 1px 2px 1px #d3d2d3;

border-radius: 2px;

transition:0.1s ease-in;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;

user-select: none;

}

.paper:hover {

cursor: pointer;

}

#num {

font-family: ‘Roboto‘, sans-serif;

font-size: 28px;

color: #999;

text-align: center;

margin-top: 32px;

}

.ripple {

background-color: rgba(0, 0, 0, 0.45);

border-radius: 100%;

height: 100px;

width: 100px;

margin-top: -90px;

position: relative;-webkit-transform: scale(0);

transform: scale(0);

}

.animate {-webkit-animation: ripple 0.4s linear;

animation: ripple0.4s linear;

}

@-webkit-keyframes ripple {100%{-webkit-transform: scale(12);

transform: scale(12);

background-color: transparent;

}

}

@keyframes ripple {100%{-webkit-transform: scale(12);

transform: scale(12);

background-color: transparent;

}

}

$(document).ready(function() {

$(".paper").mousedown(function(e) {var ripple = $(this).find(".ripple");

ripple.removeClass("animate");var x = parseInt(e.pageX - $(this).offset().left) - (ripple.width() / 2);var y = parseInt(e.pageY - $(this).offset().top) - (ripple.height() / 2);

ripple.css({

top: y,

left: x

}).addClass("animate");

});

});

1