<!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. （一）github之基础概念篇

    1.github: 一项为开发者提供git仓库的托管服务, 开发者间共享代码的场所.github上公开的软件源代码全都由git进行管理. 2.git: 开发者将源代码存入名为git仓库的资料库中,而g ...

  2. Removing bad blocks from the USB drive with fsck

    An easy way to repair a flash drive, or any drive really, is to use the fsck tool. This tool is grea ...

  3. zabbix zabbix_agentd.conf详解

    # This is a config file for the Zabbix agent daemon (Unix) # To get more information about Zabbix, v ...

  4. linux下sz rz的正确用法

    一.背景 2018年5月30日,今天遇到一个关于串口协议相关的问题,其中涉及到串口传输工具sz,rz等的使用,从man手册中并没有获取到有效信息,因此经过一番搜索,才知这两个工具应该这样使用 二.使用 ...

  5. Linq join right join left join

    代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...

  6. environment variable is too large 2047

    https://stackoverflow.com/questions/34491244/environment-variable-is-too-large-on-windows-10 方案1 Whe ...

  7. 用jQuery实现ajax总结以及跨域问题

    本文为作者原创,未经博主允许,不可转载 ajax请求的常用的参数设置: type:请求类型,"POST","GET",默认为geturl:发送请求的地址data ...

  8. 为什么mongo中不能用int作为key

    为什么mongo中不能用int作为key??

  9. blast 数据库说明

    Peptide Sequence Databases蛋白序列的数据库 nrAll non-redundant GenBank CDS translations + RefSeq Proteins + ...

  10. lncRNA研究利器之"TANRIC"

    http://bioinformatics.mdanderson.org/main/Main_Page http://ibl.mdanderson.org/tanric/_design/basic/i ...