<!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. Java集合总结(List、Map、Set)

    集合的引入 当我们有种需求,需要存储多个元素的结构时,我们前面讲过数组,数组可以存储.但是数组也有它的弊端,使用的时候,必须先定义好长度,也就是数组的长度是固定,不能根据我们的需求自动变长或者变短. ...

  2. BZOJ 2594 水管局长数据加强版（动态树）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2594 题意:给出一个无向图,边有权值.定义一条路径的长度为该路径所有边的最大值.两种操作 ...

  3. Python3基础 str """ 多行字符串

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

  4. bootstrap4

    lipsum, lorem生成假文, 是在编辑器中按tab键时生成的, 那个时候就已经生成了, 所以你在浏览器上看到的内容就是编辑器中的内容, 这个内容不会再变了. 所以你不要企图想刷新浏览器而改变假 ...

  5. JavaScript:Object属性方法

    Object的属性(firebug中没有找到) var pro={ city:"shanghai", list:[,,,,] } var Person=function(name, ...

  6. CodeCombat多人游戏Greed

    题目的意思在于,更高效的Collect Gold:然后合理的安排生产出来的士兵: // This code runs once per frame. Build units and command p ...

  7. dp专题训练

    ****************************************************************************************** 动态规划 专题训练 ...

  8. guulp配置编译ES6

    下面是gulp的配置文件,gulp具体使用点击查看 首先全局安装下 cnpm install gulp -g gulpfile.js  gulp配置文件 var gulp = require(&quo ...

  9. 项目梳理6——使用WebApiTestClient为webapi添加测试

    1.使用nuget添加WebApiTestClient的引用 2.xxxxx.WebApi\Areas\HelpPage\Views\Help\Api.cshtml页面末尾添加如下代码: @Html. ...

  10. POJ 3628 Bookshelf2（0-1背包）

    http://poj.org/problem?id=3628 题意:给出一个高度H和n个牛的高度,要求把牛堆叠起来达到H,求出该高度和H的最小差. 思路:首先我们计算出牛的总高度sum,sum-H就相 ...