<!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. Python3 matplotlib的绘图函数subplot()简介

    Python3 matplotlib的绘图函数subplot()简介 一.简介 matplotlib下, 一个 Figure 对象可以包含多个子图(Axes), 可以使用 subplot() 快速绘制 ...

  2. Tomcat分windows版和linux版

    Tomcat分windows版和linux版 官方下载链接:http://archive.apache.org/dist/tomcat/tomcat-6/v6.0.37/bin/ windows下载e ...

  3. 01: MySql简介

    MySQL其他篇 目录: 参考网站 1.1 数据库介绍 1.2 视图 1.3 触发器 1.4 事物 1.1 数据库介绍返回顶部 1.什么是数据库? 1. 数据库(Database)是按照数据结构来组织 ...

  4. CF#235E. Number Challenge

    传送门 可以理解为上一道题的扩展板.. 然后我们就可以YY出这样一个式子 ${\sum_{i=1}^a\sum_{j=1}^b\sum_{k=1}^cd(ijk)=\sum_{i=1}^a\sum_{ ...

  5. 解决国内 NPM 安装依赖速度慢问题

    不知道各位是否遇到这种情况,使用NPM(Node.js包管理工具)安装依赖时速度特别慢,为了安装Express,执行命令后两个多小时都没安装成功,最后只能取消安装,笔者20M带宽,应该不是我网络的原因 ...

  6. JS引擎深入分析

    转载自阮一峰:http://javascript.ruanyifeng.com/bom/engine.html 目录 JavaScript代码嵌入网页的方法 script标签:代码嵌入网页 scrip ...

  7. IntelliJ IDEA 连接数据库 详细过程

    IntelliJ IDEA集成了众多插件,方便开发者使用,使用其自带的Database模块就可以很方便的配置.连接到数据库,本次操作以MySQL为例,其中testjdbc数据库已经提前建好,里面有两张 ...

  8. Python3基础 str 通过拆分字符串与插入新的内容形成新的字符串

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

  9. 一个改写MBR的例子

    前言 想要对MBR类的病毒进行一下研究与学习,在此期间,看了很多资料,其中帮助最大的就是金龟子学姐和willj学长发表的文章.一个从源码与实现角度来讲了一下,另外一个从反病毒角度来分析.   功能描述 ...

  10. 《js高级程序设计》--第三章数据类型

    一.关键字 二.保留字 三.数据类型 (数据类型具有动态性)   1.Undefined 声明变量却未对其加以初始化(赋值) 2.Null null值表示一个空对象指针,而这也正是使用typeof操作 ...