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. PS图片透明处理方法

    // http://www.3lian.com/edu/2014/06-18/149890.html 今天想把图片背景做成透明效果,以前叫美工的妹纸帮忙做过,自己没留意学. 今天需要做这个东西,特别记 ...

  2. HTML/CSS实现的搜索框

    谷歌和百度首页的搜索框都是<input>+<button>模式的,bing的搜索框感觉要好点儿.简言之,就是将提交按钮放到<input>中,其实这是做不到的,只能伪 ...

  3. python 3 - 写一个注册的程序，账号和密码都存在文件里面

    choice = input('请输入你的选择:1,注册2.删除用户3.登录') #注册 输入 账号 密码 密码确认 # #需要校验用户是否存在,两次输入的密码,是否一致,为空的情况 #账号和密码都存 ...

  4. jmeter-sampler（取样器）HTTP请求

    名称:用于标识一个sample. 注释:对于测试没任何影响,仅用来记录用户可读的注释信息. 服务名称或IP:http请求发送的目标服务器名称或者IP地址,比如:http://www.baidu.com ...

  5. hdu-5862 Counting Intersections(线段树+扫描线)

    题目链接: Counting Intersections Time Limit: 12000/6000 MS (Java/Others)     Memory Limit: 65536/65536 K ...

  6. Python IOError: [Errno 13] Permission denied:

    一般是代码写错了,比如我遇到的问题就是由于 os.listdir() 传参传错导致的. 本应该传入字符串路径名,但传入了一个文件对象(object)

  7. 国内镜像pip

    建议非清华大学校内的使用这个镜像: http://e.pypi.python.org/simple(这也是一个http://pypi.v2ex.com/simple),清华校内的就使用这个:http: ...

  8. [SHOI 2017] 分手是祝愿

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4872 [算法] 首先发现 , 对于一个开关 , 按下2次和没按是等价的 , 因此每个 ...

  9. 洛谷 P3804 [模板] 后缀自动机

    题目:https://www.luogu.org/problemnew/show/P3804 模仿了一篇题解,感觉很好写啊. 代码如下: #include<cstdio> #include ...

  10. 洛谷P1474货币系统——背包方案计数

    题目:https://www.luogu.org/problemnew/show/P1474 完全背包,注意方案计数的方法. 代码如下: #include<iostream> #inclu ...