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. webpack热替换原理

    前期准备: const path = require('path'); const HtmlWebpackPlugin= require('html-webpack-plugin'); const C ...

  2. 郝健: Linux内存管理学习笔记-第2节课【转】

    本文转载自:https://blog.csdn.net/juS3Ve/article/details/80035753 摘要 slab./proc/slabinfo和slabtop 用户空间mallo ...

  3. android的GPS代码分析JNI如何HAL之间如何设置回调函数【转】

    本文转载自:http://blog.csdn.net/kmesg/article/details/6531577 本文只关注JNI和HAL的接口部分 在jni的android_location_Gps ...

  4. cmd 环境变量设置方法详细解释

    cmd设置环境变量可以方便我们bat脚本的运行,但是要注意的是变量只在当前的cmd窗口有作用(局部生效),如果想要设置持久的环境变量需要我们通过两种手段进行设置:一种是直接修改注册表,另一种是通过我的 ...

  5. vsftpd虚拟用户【公司系统部分享】

    一,安装相关工具包 #yum -y install pam vsftpd db4 db4-utils -- pam 是用来提供身份验证的 -- vsftpd 是ftp服务的主程序 -- db4支持文件 ...

  6. 动态IP下群晖搭建DDNS服务

    转载地址:https://www.zimrilink.com/share/dsm_aliddns_server.html 通过阿里云API(php)搭建出DDNS动态域名解析服务器;不同的是本文的方法 ...

  7. JVM（一）虚拟机内存划分

    Java内存区域 线程私有数据区域:虚拟机栈,本地方法栈,程序计数器 线程共享数据区域:方法区,堆 程序计数器:当前线程所执行的字节码的行号指示器,JVM通过这个字节码解释器改变计数器的值,以选择下一 ...

  8. Linux系统上php-cli安装redis扩展

    下载 假设已经安装了redis-server,现在我们来安装redis扩展. 下载ZIP包: https://github.com/phpredis/phpredis/tree/master . 解压 ...

  9. C#中使用GetCursorPos获取屏幕坐标

    [StructLayout(LayoutKind.Sequential)] public struct POINT { public int X; public int Y; public POINT ...

  10. Behave + Selenium(Python) 二

    介绍feature, py文件和之间关系: example01.feature文件包括5行: Feature行: 介绍这个feature用来干什么的: Scenario行:介绍这个scenario用来 ...