div

{

width:100px;

transition: width 2s;

-moz-transition: width 2s; /* Firefox 4 */

-webkit-transition: width 2s; /* Safari 和 Chrome */

-o-transition: width 2s; /* Opera */

}

把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

transition css3 渐变效果的更多相关文章

  1. CSS3 渐变效果

    CSS3 渐变效果 background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */ background-im ...

  2. 第 22 章 CSS3 渐变效果

    学习要点: 1.线性渐变 2.径向渐变 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 背景渐变功能,主要有两种渐变方式:线性渐变和径向(放射性)渐变. 一．线性渐变 CSS3 提供了 li ...

  3. transform animation transition css3动画

    transform 定义   transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 值 应用  如果transform与transition联合起 ...

  4. transition Css3过度详解

    过度语法: .example { transition-property: background-color; //需要过度的css属性 transition-duration: 2s; //过度所需 ...

  5. CSS3渐变效果

    一.线性渐变linear-gradient  1.使用方法: background:-webkit-linear-gradient(red,blue);background:-moz-linear-g ...

  6. 渐变背景 css3渐变效果及代码

    渐变背景及代码  http://uigradients.com/#Behongo

  7. 14：CSS3 渐变（gradient）与 过度（transition）、CSS3 的2D动画

    14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...

  8. css3 中的transition和transform

    我以前始终都把他搞反,或者是混淆.现在可以稍微小结下. Transition:CSS3中处理动画的一个样式:只涉及动画起始和终止两个状态.如果涉及到一个动画的各个时间或者状态,那就必须要用到的另外一个 ...

  9. 【CSS3】transition过渡和animation动画

    转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄 ...

随机推荐

  1. 执行Commit时Oracle做哪些工作

    COMMIT是一个非常快的操作,当我们发布commit命令时,真正困难的动作已经完成,在数据库中已经执行了数据更改,所以已经完成了99%的任务,例如:下列操作已经产生: 1.在SGA(Buffer C ...

  2. STM32的指令周期

    在keil中编程时,写了一行代码,然后就想知道,执行这句C代码需要多长时间. 时钟周期在这就不解释了,频率的倒数. 指令周期,个人理解就是cpu执行一条汇编指令所需要的时间. 我们知道cm3使用的三级 ...

  3. 洛谷P1991 无线通讯网【最小生成树】

    题目:https://www.luogu.org/problemnew/show/P1991 题意:有p个点的坐标,可以有s个点使得这s个点之间可以无限制通信. 要使所有点之间两两有通信的路径(可以是 ...

  4. 【排序算法】冒泡排序（Bubble Sort）

    一.简介 冒泡排序(Bubble Sort)也是一种简单直观的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换, ...

  5. 服务器nginx部署PHP项目样式不出来要注意的小问题

    服务器使用nginx部署PHP项目的时候如果样式没有 出来,那么很可能 location 块里出问题了. 比如 location / { root /home/wwwroot/default/php_ ...

  6. Jquery检验输入值

    1.检验邮件 function chkEmail(strEmail) {                 if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w ...

  7. java上传超大文件

    上周遇到这样一个问题,客户上传高清视频(1G以上)的时候上传失败. 一开始以为是session过期或者文件大小受系统限制,导致的错误.查看了系统的配置文件没有看到文件大小限制,web.xml中sees ...

  8. Java常用类、集合框架类1

    A   时间日期格式转换(SDUT 2246)(SimpleDateFormat用法) 转换的df2里面时间是US,上面的df1可以是CHINA或者US. package test; import j ...

  9. 【原创】go语言学习（十九）测试用例

    目录 单元测试 压力测试 Go test命令介绍 单元测试 1.自动化测试框架 testingA. testing包提供了自动化测试相关的框架B. 支持单元测试和压力测试 import ( “test ...

  10. TCP/IP协议11种状态

    1.l  SYN_SENT :这个状态与SYN_RCVD 状态相呼应,当客户端SOCKET执行connect()进行连接时,它首先发送SYN报文,然后随即进入到SYN_SENT 状态,并等待服务端的发 ...