首页
Web开发
Windows程序
编程语言
数据库
移动开发
系统相关
微信
其他好文
会员
首页
>
Web开发
> 详细
CSS3 过渡属性
时间:
2018-10-08 14:57:25
阅读:
5129
评论:
0
收藏:
0
[点我收藏+]
标签:
无法
水平
贝塞尔曲线
iis
大小
完成
hover
浏览器
b前端开发
CSS3 过渡
多年来, Web前端开发人员一直在寻求通过HTML和CSS实现一些动画交互效果, 而不再使用JavaScript 或Flash。 现在他们的愿望实现了。 CSS3除了给我们带来前面介绍的一些 特殊功能模块之外, 还为Web设计师添加了 一些动画功能模块。 可以通过:hover、:focus、:active、:checked 或者JavaScript 触发一个元素,这样,外观变化会显得更细腻,而不会让人感觉“ 一触即发”。例如悬浮修改链接色,在 CSS2.1中鼠标悬浮时, 立刻从一个颜色变成另一个颜色。 而在CSS3 中使用过渡功能, 鼠标悬浮时, 颜色在一定的时间内, 从一个颜色过渡到另一个 颜色,给用户更好、 更细腻的体验。
CSS3的过渡功能像是一种黄油, 通过一些CSS的简单动作触发样式平滑过渡。W3C标准中描述的transition功能很简单: CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。
以往Web中的动画都是依赖于JavaScript和Flash实现,但原生CSS过渡在客户端上需要处理的资源少得多,从而显得更加平滑。 CSS3过渡与元素上的常规样式一起声明。只要目标属性更改,浏览器 就会应用过渡。除了使用JavaScript 触发动作外,在CSS中也可以通过一些伪类来触发, 如 :hover、:focus、:active、:target 和:checked等。 这很重要:无须在JavaScript中编写动画,只需要更改一个属性值并依赖浏览器来执行所有重要工作。 以下 是使用CSS创建简单过渡的步骤:
http:/ /www.iis7.com/b/wzjk/
1). 在默认样式中声明元素的初始状态样式。
2). 声明过渡元素最终状态样式, 比如悬浮状态。
3). 在默认样式中通过添加过渡函数, 添加一些不同的样式。
transition属性是一个复合属性,出于简洁性和便于维护考虑,过渡语法通常以简化的形式表达。
transition属性主要包含四个属性值:
·transition-property: 指定过渡或动态模拟的CSS属性。
·transition-duration: 指定完成过渡所需的时间。
·transition-timing-function: 指定过渡函数。
·transition-delay: 指定过渡开始出现的延迟时间。
指定过渡函数 transition-timing-function,transition- timing- function属性指定某种指代过渡“ 缓动函数”的属性。此属性可指定浏览器的过渡速度, 以及过渡期间的操作进展情况, 可以将某个值指定为预定义函数、阶梯函数或者三次贝塞尔曲线。
到目前为止,看到的ease、linear、ease-in、ease-out和ease-in-out等曲线函数非常一般,用于过渡动画中也不是十分精确。而现在制作一些动画需求越来越精确,需要定义一些更精确的函数。
CSS3 的transition中, 定义三次贝塞尔曲线的语法如右所示: cubic-bezier( P0, P1, P2, P3)
一个三次贝塞尔曲线由四个点控制曲线形状。每个点由水平和垂直两个值来确定, 也就是常说的由X和Y值确定。
这些点的值是小数或者百分比, 不过很少看到使用百分比来设置一个三次贝塞尔曲线点。而且它们的值都是一个0~1的小数。 不过有一点需要特别注意, 三次贝塞尔曲线中的P0和P两个点是无法设置的, 因为它们总是存在HTML中, 也就是说它们总会是( 0,0)和( 1,1)。
注意,三次贝塞尔曲线中的每个点值只允许0~1的值。
step()函数,step()函数用于把整个操作领域划成同样大小的间隔, 每个间隔都是都是相等的。 该函数还指定发生在开始或结束的时间间隔是否另外输出百分比(换句话说,如果输出的百分比为0%表示输入变化的初始点)。
step() 函数非常独特,它允许在固定的间隔播放动画。例如, 在 step() 函数图上可以看出, 动画属性比在0%处开始,涨到50%,动画结束时, 属性值达到100%( 也就是结束状态属性)。 并且在各个step() 函数中每个步骤在过渡动画中不够平滑
step(< integer>[,[ start| end]]?) step() 函数主要包括两个参数。
·第一个参数是一个数值< integer>, 主要用来指定step()函数间隔的数量, 此值必须是一个大于0的正整数。
·第二个参数是可选的, 是start或end, 如果第二个参数忽略, 则默认为end值。 其中step( 1, start)相当于step- start; step( 1, end)相当于step- end。
伪元素触发
使用transition 时, 常用鼠标悬浮(: hover) 来触发过渡。
为说明这与触发过渡的实际事件毫无关联, 也为强调状态变化的重要性, 下面提供了 一些触发过渡的其他方法。
使用:active “:active”伪类表示用户单击某个元素并按住鼠标按钮时显示的状态。
使用:focus“:focus”伪类通常会在元素接收键盘焦点时出现。文本输入框元素上将发生过渡, 且该元素得到焦点时会执行文本输入框元素宽度和背景色过渡。
此处作为一个边点, 当对“: hover”伪类应用过渡时, 最好将“: focus”添加到选择器堆栈。 这样将能够丰富鼠标用户和键盘用户的体验。
使用:checked “:checked”伪类在发生以下状况时触发过渡。 文本框选中时,
媒体查询触发 触发元素状态变化的另一种方法是使用CSS3媒体查询( Media Queries)。
JavaScript 触发 如果可以基于CSS的状态更改触发过渡, 自然可以通过 JavaScript做到这一点。
隐式过渡 “隐式过渡”指的是当一个属性改变时引起另一个属性到一个属性的过渡。
CSS3 过渡属性
标签:
无法
水平
贝塞尔曲线
iis
大小
完成
hover
浏览器
b前端开发
原文地址:http://blog.51cto.com/13941970/2295814
踩
(
0
)
赞
(
0
)
举报
评论
一句话评论(
0
)
登录后才能评论!
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
更多
36.VUE — 认识 Webpack 和 安装
2021-07-28
【PHP】上传图片翻转问题
2021-07-28
php对数字进行万。亿的转化
2021-07-28
五个 .NET 性能小贴士
2021-07-28
Three.js中显示坐标轴、平面、球体、四方体
2021-07-28
.net 5+ 知新:【1】 .Net 5 基本概念和开发环境搭建
2021-07-27
1.html,css
2021-07-27
基于Docker搭建 Php-fpm + Nginx 环境
2021-07-27
nginx + http + svn
2021-07-27
kubernets kube-proxy的代理 iptables和ipvs
2021-07-26
友情链接
兰亭集智
国之画
百度统计
站长统计
阿里云
chrome插件
新版天听网
关于我们
-
联系我们
-
留言反馈
© 2014
mamicode.com
版权所有 联系我们:gaon5@hotmail.com
迷上了代码!