CSS3新增属性过渡

鳄鱼君

发表文章数:642

热门标签

, ,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS3 » CSS3新增属性过渡

CSS3过渡:transition: 要过度的属性 花费时间 运动曲线 何时开始;

  1. 属性:变化的css属性,宽度高度、背景颜色、内外边距。如果想要所有的属性都变化过渡,写一个all就可以
  2. 花费时间:单位是秒(必须写单位),例如0.5s
  3. 运动曲线:默认是ease(可省略),linear(匀速)、ease-in(加速)、ease-out(减速)、ease-in-out(先加速后减速)
  4. 何时开始:单位是秒(必须写单位),可以设置延迟触发,默认是0s
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: seagreen;
        /* transition:变化的属性 花费时间 运动曲线 何时开始 */
        transition: width 0.5s ease 0.1s, height 0.5s ease 0.1s;
        /* 多个属性写all */
        transition: all 0.5s;
    }

    div:hover {
        width: 400px;
        height: 400px;
        background-color: slateblue;
    }
</style>

<div>
    我要变化
</div>

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《CSS3新增属性过渡》 发布于2020-08-22

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

5 + 3 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册