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. 为RIDE创建桌面快捷方式

    问题场景:默认情况下,RIDE的图标不是自动创建的,需要手动添加.     解决方法: 在桌面上新建"快捷方式" 目标对象的位置:C:\Python27\python2.exe - ...

  2. 配置Cisco网络设备

    了解就行,不用记 电脑管理路由器软件   路由器显示命令: router#show run :显示配置信息 router#show interface :显示接口信息 router#show ip r ...

  3. go语言开发IDE

    软件下载及绿化方法 GoLand-2018.3 链接:https://pan.baidu.com/s/15AKPDIJIN86vxfriHBjE-g 提取码:060h 选择路径的时候,去掉路径名的版本 ...

  4. 表单中submit和button按钮的区别！

    对于表单的按钮以前知道submit和button有区别,但没有深入探索,今天刚好又碰到这个问题,看了下网络上这位朋友已经有现成的总结了,而且比较到位,拿来跟大家分享下(原文地址:http://blog ...

  5. QProgressBar 样式

    setStyleSheet( "QProgressBar{border:1px solid #FFFFFF;" "height:30;" "backg ...

  6. python - django (auth 的使用)

    # """ 1. 创建用户: python manage.py createsuperuser 2. from django.contrib import auth au ...

  7. Redis的下载、安装及启动

    一.下载Redis 1. redis 的下载路径 https://pan.baidu.com/s/1tdMzOlcTlFC7Z3a3I_59hQ 提取码:5tgy 二.安装Redis cd到当前解压目 ...

  8. 057_统计 Linux 进程相关数量信息

    #!/bin/bashrunning=0sleeping=0stoped=0zombie=0 #在 proc 目录下所有以数字开始的都是当前计算机正在运行的进程的进程 PID#每个 PID 编号的目录 ...

  9. 支持utf8的str_split函数

    <?php header("Content-type: text/html; charset=utf-8"); /** * 按字节数对字符串进行分片 * @param $st ...

  10. linux 查询cpu版本、核心、线程脚本

    #!/bin/bash #1.查看物理cpu个数 physical=`cat /proc/cpuinfo |grep 'physical id'|sort -u|wc -l` echo 物理cpu个数 ...