过渡属性: transition

   1.设置需要过渡的css属性

        transition-property:  

        ①css属性,css属性; (可以写多个,用逗号隔开)

        ②all; 设置所有属性

   2.设置过渡所需时长

        transition-duration: 数字s; (设置过渡秒数)

    3.设置速度方式

        transition-timing-function:

        ①ease减速

        ②linear匀速

        ③ease-in加速

        ④ease-out减速

        ⑤ease-in-out先加速后减速

        ⑥贝塞尔曲线(贝塞尔曲线网址:http://web.chacuo.net/css3beziertool)

        例如:transition: all 0.5s cubic-bezier(0.925, 1.575, 0.120, -0.600);

        ⑦步骤

        例如:transition: all 0.5s steps(5);

    4.设置延迟时间 

        transition-delay: 数字s; (设置延迟秒数)

   5.简写 

        transition: css属性(或all)  过渡时长 速度方式 延迟时间      [一般写css属性和过渡时长就可以了]

        例如:transition:  all   5s   linear   3s;

   6.注意:

                ①如果需要鼠标移入移出都有过渡效果,就把过渡加在需要过渡的元素上

                ②如果只需要鼠标移入有过渡效果,就把过渡加在hover上面

                ③display没有过渡效果

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值