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. 如何让你的手机U盘集PE工具、系统安装、无线破解等众多功能于一身

    不久前,手里的U盘坏了,于是乎,又在网上淘了一个Type-C U盘,刚好手机电脑都可以用. 那么现在U有了,我们要做什么呢? 第一:让U盘插在手机上时,可以供手机读写,实现手机存储扩容,随插随用,简单 ...

  2. WebStorm中SVN配置

    近期在使用WebStorm进行网页开发,值得一提的是WebStorm的确是一个不错的IDE,尽管可能内存开销较大,但是在编写JS的时候提供了很多包括自动完成等强大的功能. 好了,步入正题:在实际项目开 ...

  3. PyQt5豆瓣镜像下快速安装

    直接pip安装,慢到你怀疑人生.豆瓣镜像安装,嗯,不能更爽. pip install PyQt5 -i https://pypi.douban.com/simple 谢谢:https://blog.c ...

  4. python类初探

    class human: is_alive=True is_man=True def __init__(self,age): print('this is __init__() method, whi ...

  5. HTML5实现中国象棋游戏(无人能敌)

    1. [代码][JavaScript]代码    var AI = AI||{}; AI.historyTable =   {};     //历史表  //人工智能初始化AI.init = func ...

  6. CentOS 7编译安装Tengine+PHP+MariaDB全程笔记

    安装环境:CentOS7 3.10.0-693.5.2.el7.x86_64 准备源码包: pcre-8.41.tar.gz openssl-1.0.1h.tar.gz zlib-1.2.11.tar ...

  7. Apache-POI 简单应用

    测试的Excel文件为四列的普通表格 jar包:poi-3.15-beta2.jar(Office2003xls文件).poi-ooxml-3.15-beta2.jar(Office2007xlsx文 ...

  8. xgboost算法原理

    XGBoost是2014年3月陈天奇博士提出的,是基于CART树的一种boosting算法,XGBoost使用CART树有两点原因:对于分类问题,CART树的叶子结点对应的值是一个实际的分数,而非一个 ...

  9. UOJ_407_【IOI2018】狼人

    http://uoj.ac/problem/407 分析: 分别建立最小/最大kruskal重构树. 每次询问给出的两个点能走到的部分分别对应两棵树\(dfs\)序的一段区间. 转化成判断矩形中是否有 ...

  10. [转载]理解 I/O Completion Port (IOCP完成端口)

    原文:理解 I/O Completion Port (IOCP完成端口)欢迎阅读此篇IOCP教程.我将先给出IOCP的定义然后给出它的实现方法,最后剖析一个Echo程序来为您拨开IOCP的谜云,除去你 ...