CSS(九)
来源:互联网 发布:引起妹子的兴趣知乎 编辑:程序博客网 时间:2024/04/30 09:54
CSS3 过渡
CSS3 过渡
CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。用鼠标移过下面的元素:
用鼠标移过下面的元素:
CSS3
过渡
过渡
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
4.0 -webkit-10.016.0
4.0 -moz-6.1
3.1 -webkit-12.1
10.5 -o-transition-delay26.0
4.0 -webkit-10.016.0
4.0 -moz-6.1
3.1 -webkit-12.1
10.5 -o-transition-duration26.0
4.0 -webkit-10.016.0
4.0 -moz-6.1
3.1 -webkit-12.1
10.5 -o-transition-property26.0
4.0 -webkit-10.016.0
4.0 -moz-6.1
3.1 -webkit-12.1
10.5 -o-transition-timing-function26.0
4.0 -webkit-10.016.0
4.0 -moz-6.1
3.1 -webkit-12.1
10.5 -o-
它是如何工作?
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
实例
应用于宽度属性的过渡效果,时长为 2 秒:
div{transition:width2s; -webkit-transition:width2s;/* Safari*/}
注意: 如果未指定的期限,transition将没有任何效果,因为默认值是0。
指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时:
实例
规定当鼠标指针悬浮(:hover)于 <div>元素上时:
div:hover{width:300px;}
尝试一下 »
注意: 当鼠标光标移动到该元素时,它逐渐改变它原有样式
多项改变
要添加多个样式的变换效果,添加的属性由逗号分隔:
实例
添加了宽度,高度和转换效果:
div{transition:width2s,height2s,transform2s; -webkit-transition:width2s,height2s, -webkit-transform2s;}
尝试一下 »
过渡属性
下表列出了所有的过渡属性:
下面的两个例子设置所有过渡属性:
实例
在一个例子中使用所有过渡属性:
div{transition-property:width;transition-duration:1s;transition-timing-function:linear;transition-delay:2s;/* Safari*/ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s;}
尝试一下 »
实例
与上面的例子相同的过渡效果,但是使用了简写的 transition 属性:
div{transition:width1slinear2s;/* Safari*/ -webkit-transition:width1slinear2s;}
尝试一下 »
阅读全文
0 0
- CSS(九)
- CSS(九)
- CSS 背景(九)
- <css 九>margin
- CSS学习笔记(九)CSS 文本
- CSS学习(九)-CSS背景
- XML:CSS基础之九
- (九)css(字体)
- jquery 实现原理九:css
- HTML+CSS学习笔记 (九)
- CSS(九) 设置表格样式
- Css基础学习(九)—缩写
- 网页制作CSS样式九条技巧
- CSS实例(九):多种菜单效果
- css九种的DIV边框样式
- CSS基础学习九:伪类
- 《HTML+CSS基础课程》学习笔记九
- 【CSS笔记九】单位和值
- 欢迎使用CSDN-markdown编辑器
- dubbo--5.添加dubbo
- 中北大学NUC2017新生赛1009/NOJ-1989
- CSS(八)
- 转载-深入学习:Windows下Git入门教程(上)
- CSS(九)
- 常量池
- 创建springboot项目时 yml或application.properties无效或无法读取的问题
- ACM训练了日记—12月10日
- thinkphp5 笔记第二天 重点 curl phpmailer
- easyui 常用控件禁用方法
- AbstractQueuedSynchronizer整体解析
- 请实现一个函数用来匹配包括'.'和'*'的正则表达式。模式中的字符'.'表示任意一个字符,而'*'表示它前面的字符可以出现任意次(包含0次)。 在本题中,匹配是指字符串的所有字符匹配整个模式。
- 转载-深入学习:Windows下Git入门教程(下)