HTML

<a href="#" title="">test</a>

CSS

a {display:block; width:200px; line-height:2em; border: 1px solid #000; text-align: center;}

a:hover {width:300px; background-color: #f00; transition-duration:0.2s;}

只要在:hover里写 transition-duration 就可以了

transition动画最简使用方式的更多相关文章

  1. 移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

  2. CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

    ---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYP ...

  3. Swift: 是用Custom Segue还是用Transition动画

    用一个很简单的场景做为例子:在storyboard上,你有用UINavigationController串起来两个UIViewController.这两个controller之间要互相跳转,A-> ...

  4. 实现activity跳转动画的若干种方式

    第一种: (使用overridePendingTransition方法实现Activity跳转动画) 在Activity中代码如下 /** * 点击按钮实现跳转逻辑 */ button1.setOnC ...

  5. CSS3的transition动画功能

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. css3 Transition动画执行时有可能会出现闪烁的bug

    css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候. 解决方法: 1.-webkit-backface-visibility: hidden; 2.-webkit- ...

  7. 解决transition动画与display冲突的几种方法

    如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然后隐 ...

  8. appendChild与Transition动画

    在createElement之后,直接把这个div append到body中,是不会触发css3 transition动画的 必须要让浏览器计算div的css属性后,然后再设置div的style,才会 ...

  9. css3动画的两种方式transition和@keyframs

随机推荐

  1. debian7配置

    输入法: apt-get install ibus ibus-pinyin 并执行ibus-setup进行配置,首选项->输入法->中文,然后按添加按钮即可. 软件开发基本软件:apt-g ...

  2. eclipse(myeclipse) author的默认名字

    更改eclipse(myeclipse) author的默认名字 --- 修改MyEclipse eclipse 注释的作者 在eclipse/myeclipse中,当我们去添加注释的作者选项时,@a ...

  3. Hadoop- 分布式资源管理YARN架构讲解

    YARN是分布式资源管理,每一台机器都要去管理该台计算机的资源,Yarn负责为MapReduce程序分配运算硬件资源.每一台机器的管理者叫 NodeManager,整个集群的管理者管理着整个集群的No ...

  4. 简易html5贪吃蛇

    1. [图片] E6~0%QPA46ER843UQJ$0Z`H.jpg ​2. [文件] snake.html <!DOCTYPE html><html><head> ...

  5. IntelliJ IDEA 中详细图解记录如何连接MySQL数据库

  6. IDEA 设置代码行宽度

    1.在File->settings->Editor->Code Style 2.在File->settings->Editor->Code Style->XM ...

  7. Unix环境编程之文件IO

    1.文件IO 2.文件与目录 3.进程 4.多线程编程 5.信号 6.进程间通信 学习linux编程,首先要学会使用shell,这里一些基础命令就不介绍了.这里唯一要提的一个shell命令就是man. ...

  8. P1955 [NOI2015]程序自动分析[离散化+并查集]

    大水题一道,不明白为什么你谷评了个蓝.一看就是离散化,先去满足相等的条件,相等即为两点联通,或者说在同一个集合内.再看不相等,只有两元素在同一集合才不满足.裸的disjoint-set直接上,常数巨大 ...

  9. P2060 [HNOI2006]马步距离

    P2060 [HNOI2006]马步距离 数据到百万级别,明显爆搜不行,剪枝也没法剪.先打表.发现小数据内步数比较受位置关系影响,但数据一大就不影响了.大概搜了一个20*20的表把赋值语句打出来.判断 ...

  10. 「LuoguP4995」「洛谷11月月赛」 跳跳！（贪心

    题目描述 你是一只小跳蛙,你特别擅长在各种地方跳来跳去. 这一天,你和朋友小 F 一起出去玩耍的时候,遇到了一堆高矮不同的石头,其中第 ii 块的石头高度为 h_ihi​,地面的高度是 h_0 = 0 ...