IT兄弟连 HTML5教程 CSS3属性特效 transition过渡
CSS3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
transition属性是一个简写属性,用于设置四个过渡属性,这四个过渡属性的描述如表1-21:
表1-21 transition过渡属性及描述
transition最简单的用法
下面,我们为一个div设置初始宽度为200px,背景颜色为“red”色并增加“transition: 2s”。当鼠标移入到这个div后,div经过2s后宽度增加到400px,背景颜色变成“pink”色。2s的过渡时间,我们可以见证div的整体变化,代码如下:
将这段代码运行到浏览器中,我们可以一览div的过渡效果。图7-62是笔者为div过渡初期、中期和后期随机截取的三张图,以供读者参考:
另外,transition还可以指定需要过渡的属性,如我们只需要过渡上例div的宽度属性时,只需要将transition属性的值设为“2s width”。这是,当我们将鼠标移入到这个元素时,div背景颜色立马变为了“pink”色,而宽度变化是有过渡的。
我们还可以设置transition的运动样式、延迟时间及运动形式,读者感兴趣可以一一尝试设置运行。
IT兄弟连 HTML5教程 CSS3属性特效 transition过渡的更多相关文章
- IT兄弟连 HTML5教程 CSS3属性特效 动画-animation
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...
- IT兄弟连 HTML5教程 CSS3属性特效 文字描边
用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text ...
- IT兄弟连 HTML5教程 CSS3属性特效 小结及习题
本章小结 CSS3新增了许多属性,CSS3样式新增了一种颜色模式rgba用来制作透明色,比CSS的颜色模式多了一个透明度的设置.文字的CSS3特效有文字阴影.文字描边.文字排版和文字省略等.另外,CS ...
- IT兄弟连 HTML5教程 CSS3属性特效 3D变换3
5 3D旋转 在三维变形中,我们可以让元素在任何轴旋转.为此,CSS3新增了三个旋转函数:rotateX().rotateY()和rotateZ().使用rotateX()函数允许一个元素围绕X轴旋 ...
- IT兄弟连 HTML5教程 CSS3属性特效 3D变换2
3 perspective-origin景深基点 perspective-origin景深基点属性时3D变形中另一个重要属性,主要用来决定perspective属性的源点角度.它实际上设置了X轴和Y ...
- IT兄弟连 HTML5教程 CSS3属性特效 3D变换1
3D变换较2D变换多了一下的转换属性,3D转换属性及描述如表1: 表1 3D转换属性 3D的转换方法如表2: 表2 3D转换方法 1 transform-style transform- ...
- IT兄弟连 HTML5教程 CSS3属性特效 2D变换2
3 scale() 方法 通过scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X轴)和高度(Y轴)参数.缩放scale()函数让元素根据中心原点对对象进行缩放.默认值是1,因此0.01 ...
- IT兄弟连 HTML5教程 CSS3属性特效 2D变换1
通过CSS3转换,能够对元素进行移动.缩放.转动.拉长或拉伸.它如何工作?转换是使元素改变形状.尺寸和位置的一种效果.CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法. 转换属性 ...
- IT兄弟连 HTML5教程 CSS3属性特效 遮罩
CSS遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果.遮罩有三个属性可以设置,分别是mask-image.mask-position ...
随机推荐
- #在windows上使用ngix重定向目录访问远程服务器文件详细实例
为了在开发环境保持于生产环境相同的访问远程服务器文件资源的目录配置,需要在开发环境(windows)在远程文件服务器使用nignx重定向文件目录,因为网上的资料大都是copy的,解释比较笼统,也没有具 ...
- while(cin)?
#include<iostream> #include<utility> using namespace std; int main() { int i; do { cout& ...
- Apache和PHP结合、Apache默认虚拟主机
5月28日任务 课程内容: 11.14/11.15 Apache和PHP结合11.16/11.17 Apache默认虚拟主机 11.14/11.15 Apache和PHP结合 到目前为止虽然安装好了A ...
- Git基础用法
从远程仓库拉取代码: git clone https://xxxx.xxx.xx 进入拉取到代码的路径下,(文件夹中含有 .git 隐藏文件夹) 查看当前是否关联到远git代码管理 git statu ...
- PHP获取绝对路径dirname(__FILE__)和__DIR__比较
我们都知道,要获取当前PHP脚本所在目录的绝对路径,dirname(__FILE__) 和 __DIR__都可以实现.那么什么情况下用 dirname(__FILE__),什么情况下用 __DIR__ ...
- Spring Securtiy 认证流程(源码分析)
当用 Spring Security 框架进行认证时,你可能会遇到这样的问题: 你输入的用户名或密码不管是空还是错误,它的错误信息都是 Bad credentials. 那么如果你想根据不同的情况给出 ...
- springboot整合activiti
1.第一步添加bpmn文件得插件,不然没法查看和编辑bpmn文件,添加插件的方法各自百度即可,很简单 2.安装好bpmn插件后开始新建bpmn文件,也就是画流程图 一般是在代码中进行指定流程审批人的, ...
- 16.Django学习之文件上传和下载
上传就这么六步! 一. settings配置文件中配置 MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'medias').repl ...
- 和为k的倍数
小b喜欢和为K的倍数的序列. 现在有一个长度为n的序列A,请问A有多少个非空连续子序列是小b喜欢的. #include<cstdio> #include<iostream> # ...
- OC 与js 互相调用
参考文章 iOS开发-基于原生JS与OC方法互相调用并传值(附HTML代码) 参考文章 http://www.jianshu.com/p/fd378c6d70c0 利用苹果原生的JavaScriptC ...