transition属性详细讲解

网友投稿 934 2022-08-27

transition属性详细讲解

transition属性详细讲解

今天由于上午有事,只能晚上写文章了,今天借助前两天讲的伪类,总结一下transition属性,这样做出来的页面效果会更加美观一些,可能会有不足的地方,欢迎大佬补充。

transition属性的格式:

transition:transition-property,transition-duration,transition-timing-function,transition-delay;

它的四个过渡属性是这样的意思:

transition-property:规定设置过渡效果的属性名称。

transition-duration:规定完成这个过渡效果需要多少秒或者毫秒。

transition-timing-function:规定这个过渡效果的速度曲线。

transition-delay:规定过渡的延迟时间。

过渡的动画类型主要有:

linear:线性过渡。

ease:平滑过渡。

ease-in:逐渐加速。

ease-out:逐渐减速。

ease-in-out:先加速后减速。

他们的属性介绍主要是:

linear:规定以相同的速度开始至结束的过渡效果。

ease:规定慢速开始逐渐变快然后慢速结束的过渡效果。

ease-in:规定以慢速度开始的过渡效果。

ease-out:规定以慢速度结束的过渡效果。

ease-in-out:规定以慢速开始至结束的过渡效果。

我们做一个小例子,我们利用伪类,当光标移动在div上,背景颜色由红色变成绿色:\

总体来说:transition属性还是搭配伪类用的比较多,比如hover、:focus,但是也常会用到javascript、@madia触发。transition和javascript的结合更为强大。js用来设定要变化的样式,transition则负责动画效果。我们一般都在css里面写transition,transition属性可以指定参与的过渡属性,过度时间,过渡延迟时间以及过渡动画类型等。

在写代码的时候发现transition-property属性不显示,我后来去博客查了查,才知道目前的主流浏览器,需要我们在实际开发中加浏览器厂商的前缀。我们举个例子。\

.lzr{ -webkit-transition: backgorund 0.5s ease 0; -moz-transition: backgorund 0.5s ease 0; -ms-transition: backgorund 0.5s ease 0; transition: backgorund 0.5s ease 0; }

写完了,看看浏览器端,IE没问题,chrome没问题,火狐也没问题,Opera问题来了,居然没有效果,最后发现Opera要这样写:

-o-transition: backgorund 0.5s ease 0s;

大家看到差异了吗?\

我总结一下:

火狐:-moz-

IE:-ms-

chrome:-webkit-

opera:-o-

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Pandas 数据类型概述与转换实战
下一篇:网页布局的整体思路来啦~~~
相关文章

 发表评论

暂时没有评论,来抢沙发吧~