ul{width: 300px;border: red;}
ul li{width: 300px;height: 70px;line-height: 70px;background: #fff;text-align: center;cursor: pointer;overflow: hidden;border: 1px solid #eee;}
ul li:hover .circle{
    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: #fff;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);
    }
}

<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>

一个简单版的波纹css3动画的更多相关文章

  1. 动手写一个简单版的谷歌TPU-矩阵乘法和卷积

    谷歌TPU是一个设计良好的矩阵计算加速单元,可以很好的加速神经网络的计算.本系列文章将利用公开的TPU V1相关资料,对其进行一定的简化.推测和修改,来实际编写一个简单版本的谷歌TPU.计划实现到行为 ...

  2. 动手写一个简单版的谷歌TPU-指令集

    系列目录 谷歌TPU概述和简化 基本单元-矩阵乘法阵列 基本单元-归一化和池化(待发布) TPU中的指令集 SimpleTPU实例: (计划中) 拓展 TPU的边界(规划中) 重新审视深度神经网络中的 ...

  3. [安卓] 18、一个简单的例子做自定义动画按钮和自定义Actionbar

    在做安卓UI的时候有时候需自定义具有动画效果的按钮或需要自定义一下actionbar~ 本节用一个简单的demo讲如何自定义具有动画效果的按钮,以及个性化的actionbar 下面是效果: 其中: △ ...

  4. 动手写一个简单版的谷歌TPU

    谷歌TPU是一个设计良好的矩阵计算加速单元,可以很好的加速神经网络的计算.本系列文章将利用公开的TPU V1(后简称TPU)相关资料,对其进行一定的简化.推测和修改,来实际编写一个简单版本的谷歌TPU ...

  5. 手写一个简单版的SpringMVC

    一 写在前面 这是自己实现一个简单的具有SpringMVC功能的小Demo,主要实现效果是; 自己定义的实现效果是通过浏览器地址传一个name参数,打印“my name is”+name参数.不使用S ...

  6. 实现一个简单版的express

    express应该算是早期最优秀的一个node框架了,刚开始学node做后端语言就是用的express,它的cli可以帮我们搭建好项目目录,就像现在的vue,react一样.express本身没有做太 ...

  7. MySQL 全文索引实现一个简单版搜索引擎

    前言 只有Innodb和myisam存储引擎能用全文索引(innodb支持全文索引是从mysql5.6开始的) char.varchar.text类型字段能创建全文索引(fulltext index ...

  8. css3动画性能优化--针对移动端卡顿问题

    一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...

  9. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

随机推荐

  1. expdp.sh and impdp.sh

    ####expdp.sh ###### ------------- --   UAT   -- ------------- @D:\dba\change\UAT\eais\env\env_eaisua ...

  2. 【knockoutjs】 Computed VS Pure Computed 区别

    Pure Computed只有当有其他subscriber的时候才会有这个对象,所对应的DOM对象 不激活的时候不存在,这样可以防止内存泄露,在Component等场景下不用担心dispose的问题. ...

  3. ecstore中kvstore之mongodb

    mongodb安装 详细见 http://blog.csdn.net/motian06/article/details/17560067 mongodb扩展安装 详细见 http://blog.csd ...

  4. (中等) CF 576D Flights for Regular Customers (#319 Div1 D题),矩阵快速幂。

    In the country there are exactly n cities numbered with positive integers from 1 to n. In each city ...

  5. sublime text 主题推荐

    Soda Spacegray Flatland Tomorrow Base 16 Solarized Predawn itg.flat 其他所有的配色方案和主题.

  6. Spring--AOP--面向切面编程

    AOP: 面向切面编程. 通过动态代理实现. AOP就3条线, 2条线给剪断. 实现:动态代理 如果实现interface的话, 用Proxy, InvocationHandler. 不实现inter ...

  7. 解决SSh连接过慢

    ssh 连接的时候特别慢 解决方法: 修改配置文件 /etc/ssh/sshd_config GSSAPIAuthentication yes --->no 81行左右 #UseDNS yes ...

  8. Charles从入门到精通

    Charles 从入门到精通 发表于 2015-11-14 12:00 文章目录 1. 目录 2. 简介 3. 安装 Charles 4. 将 Charles 设置成系统代理 5. Charles 主 ...

  9. Asp.net Ajax提供PageMethods调用

    页面上的Javascript通过ASP.NET AJAX除了可以调用Web服务类,还可以调用网页中的静态方法. <%@ Page Language="C#" %> &l ...

  10. (简单) UVA 11624 Fire! ,BFS。

    Description Joe works in a maze. Unfortunately, portions of the maze have caught on fire, and the ow ...