1、html+js：

<!DOCTYPE html>
<html>
<head lang="en">
    <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动画</title>
</head>
<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'));//弹出circle证明获取到了子元素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>
</html>

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;让动画停在最后是这个属性，*/
    /*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实战版的点击列表项产生水波纹动画的更多相关文章

  1. css3实战版的点击列表项产生水波纹动画——之jsoop面向对象封装版

    1.html: <!DOCTYPE html><html><head lang="en">    <meta charset=" ...

  2. 自定义ListView适配器Adapter引用布局文件的情况下实现点击列表项时背景颜色为灰色

    listview控件设置适配器的时候,如果使用自定义的adapter,比如MyArrayAdapter extends ArrayAdapter<String> 如果listitem布局文 ...

  3. Flutter 实战（一）：列表项内容可自定义的列表组件

    前言 本篇文的目的是熟练掌握 Flutter 组件的封装,并且使用回调函数实现主要功能. 本组件的设计灵感来源于 Element 组件库的 table 组件. 正题 定义回调函数 在此之前,必须要了解 ...

  4. ListView控件的列表项的文字不满一行的时候，如何实现点击该列表项的空白区域仍可触发列表项的点击事件

    今天在做Demo的过程中,使用到了ListView.然而在实现过程中,发现一个出现了一个问题:只能点击列表项的文字区域可以触发点击事件,而点击列表项的空白区域无法触发点击事件. 如下图: listit ...

  5. Android学习笔记(23):列表项的容器—AdapterView的子类们

    AdapterView的子类的子类ListView.GridView.Spinner.Gallery.AdapterViewFlipper和StackView都是作为容器使用,Adapter负责提供各 ...

  6. Android之水波纹点击效果(RippleView)

    Android5.0后各种炫的效果纷纷出来,写这篇博客主要是讲的是按钮点击效果带有的水波纹(波浪式). 当然我写的这个是自定义来实现的,在低版本(5.0一下)也可以实现点击效果.看看效果图: 上图可看 ...

  7. android: Android水波纹点击效果

    Android API 21及以上新增了ripple标签用来实现水波纹的效果.我们可以通过设置ripple背景来实现一些View点击效果. 该水波纹效果有两种:一种是有界的(点击后类似于一个矩形向四周 ...

  8. Android点击列表后弹出输入框，所点击项自动滚动到输入框上方

    使用微信的朋友圈会发现,点击某一条评论后输入框会弹出来,然后所点击的那一项会自动地滚动到输入框上方的位置,这样如果开始所点击的评论在屏幕很下方的话,就不会被输入框遮住,虽然微信这一点在我的MX2频繁点 ...

  9. CSS3实战手册(第3版)(影印版)

    <CSS3实战手册(第3版)(影印版)> 基本信息 原书名:CSS3: The Missing Manual, 3E 作者: David Sawyer McFarland 出版社:东南大学 ...

随机推荐

  1. 认识和选用常用的几种 GPRS 模块（转）

    源:http://blog.sina.com.cn/s/blog_4d80055a0100e8kr.html 我在这里把常见的GPRS模块分成3种: (1)GPRS DTU(GPRS数传单元,常称GP ...

  2. 关于tomcat启动没有进行编译或者编译报错的问题

    关于tomcat 的问题 如果项目没有编译 解决方案:1: 把项目刷新一下 然后Clean一下,之后等待右下角编译完成100%2: 有可能tomcat conf 里的配置文件的错误 进入查看下3: 如 ...

  3. javascript 中{}和[] 的理解

    下面的一段解释是摘抄的,基本理解正确,做个记录.其实js中数组其实就是对象,typeof(['a', 'b', 'c'])//测试之后结果为 :  "object" 一.{ } 大 ...

  4. Myeclipse或Eclipse中搭建Easyui环境

    1.下载Easyui.网址:http://www.jeasyui.com/download/index.php 2.下载后解压,里面的demo文件夹可以不用添加到工程中. 3.如图所示在工程datag ...

  5. Android安全讲座第九层(二) 内存dump

    近来android上越来越多的应用对自身的保护机制加强了重视,主要表现在几个方面. 1 dex加壳 2 so加壳 3 dex藏在so中,在适当的时候释放. 这是技术上一个进步,并且还有一些专业的公司提 ...

  6. java中“==”和equal区别

    8个月以后就要正式找工作啦,我觉得现在是时候花时间好好深入研究一下以前比较混肴的知识.这就当作是自我成长的第一步! 对于String中的“equal方法”和“==”一直有点混肴,今天重新看了一下他们两 ...

  7. Base64编码Java实现

    一.什么是Base64编码 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一.Base64 主要不是加密,它主要的用途是把一些二进制数转成普通字符用于网络传输. 由于一些二进制字符在 ...

  8. Ant自动构建

    Ant+jenkins+tomcat <project name="buildWar" default="clean"> <property ...

  9. 【poj解题】1028

    stack的应用 #include<iostream> #include<stack> #include<stdio.h> #include<stdlib.h ...

  10. Myeclipse创建新项目

    1. 打开myeclipse, 配置mysql server preference里找到 show view-- DB Browser, 新建数据库驱动. 1. URL填写: jdbc:mysql:/ ...