1.css3过渡

过渡的基本形式

元素→元素:hover(只要元素属性发生改变就可以使用过渡)。

元素原来变为hover状态都是干蹦。

过渡效果就是让元素以动画形式,平滑的完成。

语法: transition: all 2s linear 0s,参数解释:

第一个参数:参与过渡的属性,一般我们书写all。.

第二个参数:过渡完成的时间,单位是s,千万不能省略

第三个参数:缓冲描述(函数)

linear(匀速),ease非匀速(两头慢中间快),贝塞尔曲线(cubic-bezier(0, 0.33, 1,-0.35)) ;

第四个参数:延迟时间,单位也是s,不能省略。

还可以单独定义这四个单一属性:

transition-property (参与过渡属性),   transition-duration (过渡时间)

transition- timing-function (缓存描述),  transition -delay (延迟时间)

参与过渡的属性:只要是数值型的属性以及颜色都可以参与过渡。

比如: width,height,border-width。

   <style>

       .box{

           width: 300px;

           height: 333px;

           background-color: red;

           transition: all 2s ease 2s ;

       }

       .box:hover{

            width: 555px;

            height: 666px;

            background-color: pink;

        }

   </style>

</head>

<body>

    <div class="box"></div>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值