<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>鱼眼效果</title>
    <style>
        a:link {
        text-decoration:none
        }
        a {
        display:inline-block;
        width:120px;
        height:30px;
        background-color:#f21141;
        border:2px solid #000000;
        border-radius:20px;
        float:left;
        text-align:center;
        line-height:30px;
        color:#000;
        margin-right:3px;
        }
        @-webkit-keyframes 'xiaolei' {
            0%
        {
        -webkit-transform:scale(1);
        background-color:#f21141;
        border-radius:10px;
        }
        40% {
        -webkit-transform:scale(1.5);
        background-color:#00ff21;
          border-radius:10px;
        }
        100% {
         -webkit-transform:scale(1);
        background-color:#f21141;
          border-radius:10px;
        }
        }
        a:hover {
        -webkit-animation-name:'xiaolei';
        -webkit-animation-duration:4s;
        -webkit-animation-iteration-count:infinite;
        }

/*infinite:无限的；无穷的*/

</style>
</head>
<body>
     <a href="">小蕾1</a>
     <a href="">小蕾2</a>
     <a href="">小蕾3</a>
     <a href="">小蕾4</a>
     <a href="">小蕾5</a>
</body>
</html>

Animation鱼眼效果的更多相关文章

  1. Android中xml设置Animation动画效果详解

    在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...

  2. android中设置Animation 动画效果

    在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...

  3. 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  4. android Animation 动画效果介绍

    Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动 ...

  5. H5中需要掌握的 ANIMATION 动画效果

    CSS3的动画在PC网页上或者APP上用得越来越多,比如H5页面的应用,目前在营销传播上的意义比较大,还有企业官网或者APP主要介绍也用得比较多,当然还有很多地方都用到.所以学习css的动画也迫在眉睫 ...

  6. ios animation 动画效果实现

    1.过渡动画 CATransition CATransition *animation = [CATransition animation]; [animation setDuration:1.0]; ...

  7. CSS content换行技术实现字符animation loading效果

    一.之前我的字符loading实现 关于字符打点动画实现,我之前使用过box-shadow模拟,还有border+background模拟,还有使用text-shadow实现,以及今年自认为是最好的实 ...

  8. Android Animation动画效果简介

    AlphaAnimation 淡入淡出动画  <alpha>A fade-in or fade-out animation. Represents an AlphaAnimation. a ...

  9. Animation(动画效果)

    Ctrl+6打开Animation窗口.选择物体,点击录制,保存录制文件后即为给该物体添加了动画效果. Animation可以修改某时间点的物体位置.大小.材质球上的所有属性.碰撞器等等. 可以通过修 ...

随机推荐

  1. python中的property

    提示:这篇博文参考了两个博客,第一篇博文地址为:https://www.cnblogs.com/Lambda721/p/6132206.html,另一篇博文地址如下:关于python的property ...

  2. Python入门之python可变对象与不可变对象

    本文分为如下几个部分 概念 地址问题 作为函数参数 可变参数在类中使用 函数默认参数 类的实现上的差异 概念 可变对象与不可变对象的区别在于对象本身是否可变. python内置的一些类型中 可变对象: ...

  3. php json_decode返回null

    在使用json_decode函数想把json串转化为数组的时候,出现了null,当时还以为是因为json对字符串的长度有限制,还以为是因为两边少了引号,经过多次处理,发现都没有效果. 百度各种帖子,发 ...

  4. Python3 pip出现Fatal error in launcher: Unable to create process using '"'

    Python3 pip出现Fatal error in launcher: Unable to create process using '"' 问题分析: 先python2又安装了pyth ...

  5. JavaScript闭包 懂不懂由你反正我是懂了

    原文链接:http://www.jb51.net/article/28611.htm 越来越觉得国内没有教书育人的氛围,为了弄懂JS的闭包,我使出了我英语四级吃奶的劲去google上搜寻着有关闭包的解 ...

  6. Python3基础 list 推导式 生成与已知列表等长度+元素为0的列表

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  7. Python3基础 str translate 将指定字符转换成另一种特定字符

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  8. zedgraph右键菜单的汉化

    http://blog.csdn.net/jeryler/article/details/7876376 修改 zedGraphControl的ContextMenuBuilder事件即可! zedG ...

  9. 【附1】hystrix详述（1）

    一.hystrix的作用 控制被依赖服务的延时和失败 防止在复杂系统中的级联失败 可以进行快速失败(不需要等待)和快速恢复(当依赖服务失效后又恢复正常,其对应的线程池会被清理干净,即剩下的都是未使用的 ...

  10. 【第八章】 springboot + mybatis + 多数据源

    在实际开发中,我们一个项目可能会用到多个数据库,通常一个数据库对应一个数据源. 代码结构: 简要原理: 1)DatabaseType列出所有的数据源的key---key 2)DatabaseConte ...