<!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. P3294 [SCOI2016]背单词

    P3294 [SCOI2016]背单词 Trie+贪心 倒插进树+取出重建+子树处理+贪心遍历 倒插进树:把后缀转化为前缀,所以把字符串倒着插进Trie中 取出重建:重新建立一棵以单词为节点的树,如果 ...

  2. wireshark不支持抓localhost/127.0.0.1的包解决方法

    有些时候,测试网络应用时,为了开发方便,我们会在本机同时开启客户端和测试端,对于第三方的库来说,因为不能debug,可能需要通过抓包进行分析,今天用wireshark根据端口抓包的时候,发现怎么都下不 ...

  3. 02: DOM 实例

    1.1 Event 对象 <body> <a id="myAnchor" href="http://www.microsoft.com"> ...

  4. 20145105 《Java程序设计》实验四总结

    实验四 Android开发基础 一.实验内容 基于Android Studio开发简单的Android应用并部署测试 了解Android组件.布局管理器的使用: 掌握Android中事件处理机制 二. ...

  5. 20145118 《Java程序设计》 实验报告三

    实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程 2 ...

  6. HTML切换页面IE版本

    <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![e ...

  7. DD-WRT自定义脚本更新花生壳DDNS

    N年以前买了一个tp-link 841n v7,一直用的还算可以吧,除了不定期重启路由器,不然网速慢的龟爬啊!这也是TP原厂固件的通病,于是刷了DD-WRT,话说DD确实很爽,除了功能强大之外,而且很 ...

  8. 自定义redis序列化工具

    redis一个优点就是可以将数据写入到磁盘中. 我们知道写入磁盘的数据实际上都是以字节(0101这样的二进制数据)的形式写入的. 这意味着如果我们要将一个对象写入磁盘,就必须将这个对象序列化. jav ...

  9. java中子类实例化过程中的内存分配

    知识点: 子类继承父类之后,实例化子类时,内存中子类是如何分配内存的呢? 下面,自己会结合一个例子,解释一下,一个子类实例化过程中,内存是如何分配的 参考博客:http://www.cnblogs.c ...

  10. Image():强制让图片缓存起来

    Image 对象 Image 对象代表嵌入的图像. <img> 标签每出现一次,一个 Image 对象就会被创建. 创建一个Image对象:var a=new Image();    定义 ...