css3过渡属性怎么用
导读:本文共4217.5字符,通常情况下阅读需要14分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: css3过渡采用的属性有:1、transition;2、transition-property;3、transition-duration;4、transition-timing-function;5、transition-delay。本教程操作环境... ...
目录
(为您整理了一些要点),点击可以直达。
css3过渡采用的属性有:1、transition;2、transition-property;3、transition-duration;4、transition-timing-function;5、transition-delay。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
指定要添加效果的CSS属性
指定效果的持续时间。
通过过渡transition属性,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果,要实现这一点,必须实现一项内容,即指定效果的持续时间。
css3过渡属性
复合属性
过渡transition的这四个子属性只有<transition-duration>是必需值且不能为0。其中,<transition-duration>和<transition-delay>都是时间。当两个时间同时出现时,第一个是<transition-duration>,第二个是<transition-delay>;当只有一个时间时,它是<transition-duration>,而<transition-delay>为默认值0
transition:<transition-property>||<transition-duration>||<transition-timing-function>||<transition-delay>
[注意]transition的这四个子属性之间不能用逗号隔开,只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值,多值部分稍后介绍);而空格隔开的代表不同属性的四个关于过渡的子属性。
.test{border:1pxsolidred;width:100px;height:50px;transition:2s;/*代表持续时间为2s,延迟时间为默认值0*//*transition:1s2s;代表持续时间为1s,延迟时间为2s*/}.test:hover{width:300px;}
<divclass="test"></div>
相关子属性
1、transition-property
transition-property
属性指定CSS属性的nametransition效果(transition效果时将会启动指定的CSS属性的变化)。none: 没有指定任何样式,all: 默认值,表示指定元素所有支持transition-property属性的样式。<transition-property>: 可过渡的样式,可用逗号分开写多个样式。
注意:始终指定 transition-duration
属性,否则持续时间为0,transition不会有任何效果。
1)、可过渡的样式
不是所有的CSS样式值都可以过渡,只有具有中间值的属性才具备过渡效果 ,具体如下
颜色:colorbackground-colorborder-coloroutline-color位置:backround-positionleftrighttopbottom长度:[1]max-heightmin-heightmax-widthmin-widthheightwidth[2]border-widthmarginpaddingoutline-widthoutline-offset[3]font-sizeline-heighttext-indentvertical-align[4]border-spacingletter-spacingword-spacing数字:opacityvisibilityz-indexfont-weightzoom组合:text-shadowtransformbox-shadowclip其他:gradient
.test{border:1pxsolidred;width:100px;height:50px;background-color:lightblue;transition:width2s,background-color2sease0.5s;/*代表width持续时间为2s,延迟时间为默认值0;background-color持续时间2s延迟0.5s*/}.test:hover{width:300px;background-color:indianred;}
效果图:
2、transition-duration
transition-duration
属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。默认值:0s。
[注意]该属性不能为负值 。
[注意]若该属性为0s则为默认值,若为0则为无效值。所以必须带单位 。
[注意]该值为单值时,即所有过渡属性都对应同样时间;该值为多值时,过渡属性按照顺序对应持续时间 。
3、transition-timing-function
transition-timing-function
属性指定切换效果的速度。它可以取一下几个值。默认值:ease 。
4、transition-delay
transition-delay
属性指定何时将开始切换效果,值是指以秒为单位(S)或毫秒(ms)。默认值:0s。
[注意]该属性若为负值,无延迟效果,但过渡元素的起始值将从0变成设定值(设定值=延迟时间+持续时间)。若该设定值小于等于0,则无过渡效果;若该设定值大于0,则过渡元素从该设定值开始完成剩余的过渡效果 [注意]若该属性为0s则为默认值,若为0则为无效值。所以必须带单位 。
[注意]该值为单值时,即所有过渡属性都对应同样时间;该值为多值时,过渡属性按照顺序对应持续时间 。
过渡阶段
过渡开始时间=样式改变的时刻+过渡延迟时间;而过渡结束时间=过渡开始时间+过渡持续时间。
过渡起始值=过渡前的过渡属性值;而过渡结束值=过渡完成后的过渡属性值 。
过渡分为两个阶段:前进(forward)和反向(reverse)。若前进阶段进行一段时间后进入反向阶段,则反向阶段的初始值是前进阶段结束时的瞬时值
以hover为例,若在元素非hover态时设置transition,相当于设置的反向状态。而前进和反向是一致的。而如果在元素hover态设置transition,则前进状态以hover态设置的为准,而反向状态以非hover态设置的为准 。
.test{border:1pxsolidred;width:100px;height:50px;transition:3s;/*设置反向状态*/}.test:hover{width:300px;transition:100ms;}
效果:
触发方式
一般地,过渡transition的触发有三种方式,分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active等 。
hover : 鼠标悬停触发 。
active : 用户单击元素并按住鼠标时触发 。
focus : 获得焦点时触发。
@media触发 : 符合媒体查询条件时触发 。
/*把浏览器的宽度拖动到小于1000px时触发*/@media(max-width:1000px){.test{width:500px;}}
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
css3过渡属性怎么用的详细内容,希望对您有所帮助,信息来源于网络。