CSS 3 过渡(transition)操作

1.什么是过渡
    使得css属性值,在一段时间内平缓变化的效果
 2.过渡语法
    1.指定过渡属性
      属性:transition-property
      取值:
         1.all 能使用过渡的属性,一律用过渡体现
     2.具体属性名
       ex:
       transition-property:background
       当背景的属性在发生变化时用过渡给体现出来
       transition-property:border-radius;
       当边框倒角在发生改变时用过渡体现出来
       transition-property:all 
       允许设置过渡效果的属性:
          1.颜色属性(背景,文字,边框颜色,阴影颜色)
          2.取值为数字的属性(高宽,内外边距等)
          3.转换属性(位移,旋转,缩放,倾斜)
          4.阴影属性
          5.渐变属性
          6.visibility属性(能见度)
    2.指定过渡时长
      作用:指定在多长时间内完成过渡操作
      属性:transition-duration
      取值:
        以s或ms为单位的数值
        1000ms=1s
    3.指定过渡速度时间曲线函数
      属性:transition-timing-function
      取值:
          1.ease 默认值,慢速开始,快速变快,慢速结束
          2.linear 匀速
          3.ease-in 慢速开始,加速结束
          4.ease-out 快速开始,慢速结束
          5.ease-in-out 慢速开始和结束,中间先加速后减速
    4.指定过渡延迟时间

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值