简介:transition(过渡)字如其名,是用来设置元素由一种状态到另一种状态中间的过渡效果的,比如变化的速度,变化的持续时间等。它主要有4个属性,分别是transition-PRoperty(属性,如width,color等),transition-duration(变化持续时间),transition-timing-function(如何变化),transition-delay(延迟时间)。使用方法如下:
一.语法
transition:property duration timing-function delay;二.参数 1.property:指对哪个属性进行过渡,有三种设置方法,none(不对任何属性进行过渡),all(对所有属性都进行过渡),indent(元素属性名,如width,color等)。 2.duration:规定过渡持续的时间,单位为秒或毫秒(s/ms)。 3.timing-function:过渡的效果: (1)ease:逐渐变慢,默认值 (2)linear:匀速 (3)ease-in:加速 (4)ease-out:减速 (5)ease-in-out:加速然后减速 (6)cubic-bezier:该值允许你去自定义一个时间曲线 ,(x1, y1, x2, y2)四个值特定于曲线上点P1和点 P2。所有值需在[0, 1]区域内,否则无效。 4.delay:过渡效果何时开始。
三.小练习
<!DOCTYPE html><html><head> <title>transition的应用</title> <style> html,body { margin: 0; padding: 0; font-size: 36px; } .demo-parent { width: 100%; height: 700px; background: black; position: fixed; display: flex; flex-direction:row; justify-content: center; padding-top: 260px; } .demo { background: yellow; transition: 3s linear 1s; color: #fff; height: 30%; text-align: center; opacity: 1; padding: 10px; } .demo:hover { background: #ccc; color: green; opacity: 0.9; border-radius: 5px; } h1 { font-size: 2em; } p { font-size: 1em; } </style></head><body><div class="demo-parent"> <div class="demo"> <h1>我是最大的字</h1> <p>注意看我的颜色和背景如何变化哦!</p> </div></div><script type="text/javascript"></script></body></html>效果如图: 图片只是个变化的各个阶段的效果,当然过渡不会这么生硬,一切以运行效果为准。
新闻热点
疑难解答