CSS3 过渡

2021-04-09 15:25

阅读:476

标签:css   flash动画   现在   运动   低版本   必须   hover   javascrip   ie9   

CSS 过渡

  • 过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用Flash动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果
  • 过渡动画: 是从一个状态渐渐的过渡到另外一个状态
  • 可以让我们页面跟好看,更加动感十足,虽然低版本游览器不支持(ie9以下版本)但是不会影响到页面布局
  • 我们现在经常和 :hover一起搭配使用
  • 使用的口诀:谁做过渡给谁家,谁需要变化给谁加

  • transition:要过渡的属性(空格)花费时间(空格)运动曲线(空格)何时开始;
    • 属性: 想要变化的CSS属性,宽度高度、背景颜色、内外边距都可以,如果想要所有的属性都变化过度,下一个all就可以了
    • 花费时间: 单位是秒(必须写单位) 比如0.5
    • 运动曲线: 默认是ease(可以省略)
      技术图片
    • 何时开始: 单位是秒(必须写单位)可以设置延迟触发时间,默认为0s(可以省略)

技术图片

  • 上面我们把这张图片属性的宽度从100px加到了300px,花费的时间,何时开始都可以自己来控制
  • 但是我们只是过渡了一个属性,但是当你想过渡多个属性呢,这时候并不需要再写一次这属性,而是在后面添加上一个逗号即可
  • 如果想要多个属性都变化,属性写all就可以了

技术图片

CSS3 过渡

标签:css   flash动画   现在   运动   低版本   必须   hover   javascrip   ie9   

原文地址:https://www.cnblogs.com/landuo629/p/12444930.html


评论


亲,登录后才可以留言!