1, Html+js:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<link rel= "stylesheet" href= "./css/reset.css"/>
<link rel= "stylesheet" href= "./css/animation.css"/>
<script type= "Text/javascript" src= "./js/jquery-1.10.2.min.js" ></script>
<TITLE>ANIMATION-CSS3 Animation </title>
<body>
<ul class= "Clear" >
<li><span class= "Circle" ></span><a href= "#" >Button</a></li>
<li><span class= "Circle" ></span><a href= "#" >Elements</a></li>
<li><span class= "Circle" ></span><a href= "#" >Forms</a></li>
<li><span class= "Circle" ></span><a href= "#" >Charts</a></li>
</ul>
</body>
<script type= "Text/javascript" >
;(function () {
var items = document.getelementsbytagname (' li ');
for (var i = 0; i < items.length; i++) {
Items[i].onclick = function () {
Alert ($ (this));
This.getelementsbytagname (' span ') [0].style.animation = ' circle-opacity 0.5s linear 0s 1 ';
This.getelementsbytagname (' span ') [0].style.webkitanimation = ' circle-opacity 0.5s linear 0s 1 ';
This.getelementsbytagname (' span ') [0].style.animationfillmode = ' forwards ';
$ (this). Siblings (). Children (' a '). css (' color ', ' #333 ');
$ (this). Children (' a '). css (' color ', ' #2196f3 ');
Clearanimation (this);
Alert (this.getelementsbytagname (' span ') [0].getattribute (' class '));//Popup Circle proof Gets the child element span
}
}
function Clearanimation (self) {
var sid = Window.setinterval (function () {
Self.getelementsbytagname (' span ') [0].style.animation = ';
Self.getelementsbytagname (' span ') [0].style.webkitanimation = ';
Self.getelementsbytagname (' span ') [0].style.animationfillmode = ';
Sid = Window.clearinterval (SID);
},500);
}
}) (window);
</script>
2. CSS:
ul{width:300px;border:red;}
UL Li{width:300px;height:70px;line-height:70px;background: #fff; text-align:center;cursor:pointer;overflow:hidden ;}
UL Li a{font-weight:900;}
UL Li:hover a{
Color: #2196f3!important;
/*animation:circle-opacity 0.5s linear 0s 1;*/
/*-webkit-animation-fill-mode:forwards; Let the animation stop at the end of this property, */
/*animation-fill-mode:forwards;*/
}
UL Li A{position:relative;left: -50px;color: #333; top: -30px;}
. circle{background:transparent;border-radius:50%;width:70px;height:70px;display:inline-block;margin:0 Auto;}
@keyframes circle-opacity{
0% {
Background:rgba (192,225,250,0);
}
50% {
Transform:scale (4);
Background:rgba (192,225,250,1);
}
100% {
Transform:scale (16);
Background:rgba (192,225,250,0);
}
}
@-webkit-keyframes circle-opacity{
0% {
Background:rgba (192,225,250,0);
}
50% {
Transform:scale (4);
Background:rgba (192,225,250,1);
}
100% {
Transform:scale (16);
Background:rgba (192,225,250,0);
}
}
CSS3 Live version of the Click List item produces water ripple animation