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. Canvas动画按钮

    在线演示 本地下载

  2. ManualResetEvent使用

    1.定义 MSDN定义: 通知一个或多个正在等待的线程已发生事件.此类不能被继承. 详细说明: ManualResetEvent 允许线程通过发信号互相通信.通常,此通信涉及一个线程在其他线程进行之前 ...

  3. jquery 3D分页翻转滑块

    jquery 3D分页翻转滑块,jquery分页,jquery插件,jquery,3D翻转,css3分页,360度旋转,网页特效代码3D分页翻转滑块是一款使用网格样式与滑块效果分页的特效.

  4. install docker

    摘要: 我的环境是:CentOS-7-x86_64-Minimal-1511.iso , 也可参考docker官网文档,来安装, url : https://docs.docker.com/engin ...

  5. Qt容器组件（一）之QGroupBox、QScrollArea、QToolBox、QTabWidget

    QT中有九种容器组件,分别是组合框QGroupBox.滚动区QScrollArea.工具箱QToolBox.选项卡QTabWidget.控件栈QWidgetStack.框架QFrame.组件QWidg ...

  6. BZOJ_5338_ [TJOI2018]xor_可持久化trie

    BZOJ_5338_ [TJOI2018]xor_可持久化trie Description 有一棵点数为N的树,树边有边权.给你一个在0~N之内的正整数K,你要在这棵树中选择K个点,将其染成黑色,并 ...

  7. 「LuoguP1429」 平面最近点对（加强版）

    题目描述 给定平面上n个点,找出其中的一对点的距离,使得在这n个点的所有点对中,该距离为所有点对中最小的 输入输出格式 输入格式: 第一行:n:2≤n≤200000 接下来n行:每行两个实数:x y, ...

  8. POJ1330(LCA入门题)

    Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 23388   Accept ...

  9. 将hive搭建到spark上

    1. 首先搭建好spark和hive,参见相关文档 2. 在spark/conf下创建hive-site.xml <configuration> <property> < ...

  10. UVa 714 Copying books 贪心+二分 最大值最小化

    题目大意: 要抄N本书,编号为1,2,3...N, 每本书有1<=x<=10000000页, 把这些书分配给K个抄写员,要求分配给某个抄写员的那些书的编号必须是连续的.每个抄写员的速度是相 ...