当前位置: 首页 > Web前端 > HTML

Transition

时间:2023-03-28 00:20:19 HTML

1.制作过渡效果的css属性transition-property:属性名;如(width)注:多个属性用逗号隔开。如果嫌麻烦,可以直接写all代表所有属性。另外,transition对于display是没用的。2、转场效果持续时间transition-duration:number+unit;如(5s)注:s为秒,ms为毫秒,两者之比为1s=1000ms。3.Speedmodetransition-timing-function:速度模式;属性如下:linear(表示匀速)ease(逐渐减速-开始时较快)ease-in(逐渐加速)ease-out(逐渐减速-最初没有ease快)ease-in-out(先加速然后减速)cubic-bezier(0.735,1.650,0.315,-0.600);(贝塞尔曲线)steps(步数);(分步骤)注:附上贝塞尔曲线生成网站效果大致如图4所示,表示延迟多少秒执行转场效果transition-delay:numbers;5.复合写法过渡:value;注意:transition的值:是4个值的组合在一个写法中,用空格隔开。第一个秒数表示转场效果需要使用的时间,第二个秒数表示延迟执行多长时间。通常,我们在开发中只会使用复合写法。