多属性过渡

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

下面我们再给这个元素多添加几个过渡的属性 .. 在这个元素的 hover 样式里,再设置一下元素的背景 ... 选择一种黄色 ..

然后在 transition-property 里面,加上这个要过渡的属性的名字 .. 这里就是 background-color .. 在其它的 transition 属性里面,你可以单独去为这个属性的过渡添加设置 ..

比如设置一下它的过渡的持续时间 .. 逗号分隔一下 .. 2s .. 这样,前面的这个 .6s 是为 border-radius 属性准备的,第二个 2s ,是为 background-color 准备的 ..

再去试一下 .. 现在,元素有两个属性会有过渡效果,一个是它的 border-radius .. 还有就是它的 background-color ,这两个属性的过渡动画的持续时间是不一样的 ..

我们可以再去添加一个过渡属性 .. 先把这个 .container 的 position ,设置成 relative;

再把这个 box 的 position 属性设置成 absolute .. 然后添加一个 left 设置一下左边的位置 ... 让它等于 30px .. 再到这个元素的 hover 样式里添加一个 left 属性,值可以是 300px ..

在过渡的属性里面再添加一个 left 属性 ... 然后再单独给这个属性的过渡动画设置一个持续时间 ...

再去预览一下 ... 现在这个元素的位置属性发生变化的时候会有使用一个过渡的动画效果 ...

0:00
1:09

多属性过渡《 CSS:过渡 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点