html图片过渡,CSS3 过渡
CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。用鼠标移过下面的元素:
用鼠标移过下面的元素:
CSS3
Transition
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性
transition
26.0
4.0 -webkit-
10.0
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-delay
26.0
4.0 -webkit-
10.0
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-duration
26.0
4.0 -webkit-
10.0
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-property
26.0
4.0 -webkit-
10.0
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-timing-function
26.0
4.0 -webkit-
10.0
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
它是如何工作?
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
指定要添加效果的CSS属性
指定效果的持续时间。
div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
注意: 如果未指定的期限,transition将没有任何效果,因为默认值是0。
指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时:
div:hover
{
width:300px;
}
注意: 当鼠标光标移动到该元素时,它逐渐改变它原有样式
多项改变
要添加多个样式的变换效果,添加的属性由逗号分隔:
div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
过渡属性
下表列出了所有的过渡属性:
属性
描述
CSS
transition
简写属性,用于在一个属性中设置四个过渡属性。
3
transition-property
规定应用过渡的 CSS 属性的名称。
3
transition-duration
定义过渡效果花费的时间。默认是 0。
3
transition-timing-function
规定过渡效果的时间曲线。默认是 "ease"。
3
transition-delay
规定过渡效果何时开始。默认是 0。
3
下面的两个例子设置所有过渡属性:
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: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
html图片过渡,CSS3 过渡相关推荐
- css 字体颜色阶梯过渡,CSS3——过渡(transition)
一.概述 CSS属性的值从一个值变成另一个值的过程叫做渐变,重点突出变化的过程.CSS3 transition系列属性可控制这个变化过程,使得属性值变化过程更加平滑.一个过渡应包含这几个属性: A:哪 ...
- html中设置过渡效果,CSS3 过渡
CSS3 过渡 CSS3 过渡 通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 请把鼠标移动到下面的元素上: ...
- css3圆角360度转动画,target,框架集,css3过渡动画,css3圆角-阴影-透明度,运动曲线,图片文字遮罩,变形...
target 模拟后台服务器 框架集 frameset和body不合,所以如果用frameset就不能有body标签 利用框架可以把浏览器窗口划分为若干个区域,每个区域就是一个框架,在其中分别显 示不 ...
- CSS3过渡小案例:折扇
CSS3过渡小案例:折扇 简单应用:利用鼠标经过后盒子阴影和上边距属性的改变,制作一个简单的页面效果 小案例:折扇案例 CSS3的过渡效果: 通过 CSS3的过渡效果,我们可以在不使用 Flash ...
- CSS3过渡动画实现hover人物弹出炫酷效果案例
目标 我们要实现的目标效果如下 过渡如何使用 可以清楚地看出效果图中的效果用到了css3中的过渡transition,先来了解一下transition CSS3 过渡是元素从一种样式逐渐改变为另一种的 ...
- 好程序员web前端技术之CSS3过渡
好程序员web前端技术之CSS3过渡,css3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改 ...
- 从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
- 原 CSS3中的过渡,css3之过渡
CSS3的过渡和转换 CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用 ...
- CSS3过渡练习-进度条(CSS3)
CSS3过渡练习-进度条(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charse ...
- CSS3过渡动画关键帧动画
一.过渡动画 过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画. 所谓的状态就是指大小.位置.颜色.变形(transform)等等这些属性. Note:不是所有属性 ...
最新文章
- sql avg函数使用格式_SQL AVG-SQL平均函数用语法示例解释
- mysql分表搜索引擎_MySql分库分表总结(转)
- Linux远程软件xshell的使用
- 《CUDA C编程权威指南》——3.4 避免分支分化
- 用996打败员工,用“奋斗”替代生活
- 33:计算分数加减表达式的值
- nssl1446-小智的旅行【dp】
- 外设驱动库开发笔记39:按键操作驱动
- centos7安装php5.2yum源操作_Centos7.6使用yum安装PHP7.2
- python发邮件实例_python 发送邮件实例
- curses.h: No such file or directory
- linux内核数据链路层,Linux网络内核数据帧的接收进程:数据链路层(概念篇)...
- vodplayer.exe
- 【一次五款】满速下载百度云神器
- 禾川x3e系列_禾川科技:“高性价比”X3E系列伺服系统能否摘得金球奖桂冠?
- 《深度学习入门-基于Python的理论与实现》第七章带读 -- CNN介绍
- 微信测试号中被动消息回复的测试
- Arduino与Proteus仿真实例-I2C总线多个M24C01设备数据储存仿真
- Proxifier使用代理ip教程
- random.seed()的用法
热门文章
- 如何去掉vi下面显示的[converted]标志
- 医学图像笔记(一)dicom数据格式
- Unity 3D 入门小游戏 小球酷跑(上)
- 简单的喜欢最长远 平凡中的陪伴最心安 懂你的人最温暖
- crossdomain.xml 文件安全配置 百度云观测、360网站监测 dz论坛crossdomain.xml
- 加州大学戴维斯分校 计算机科学,加州大学戴维斯分校计算机科学申请要求详细解读...
- atom的linux版本,Atom平台多版本Linux性能测试
- 高端技能之教你学会iOS抓包以及Fiddler抓包软件的用法
- 缩写月份单词python代码_Python替换月份为英文缩写的实现方法
- Python Pillow(PIL)库的用法介绍