HTML CSS 过渡效果

本文详细介绍了HTMLCSS中的过渡效果,包括transition属性的使用,如指定过渡的属性、持续时间、时序函数和延迟时间。通过示例代码展示了如何实现元素在不同状态间的平滑过渡,如改变margin-left时的动画效果。同时,还讲解了transition-timing-function的各种可选值,如ease、linear、steps等,以及如何自定义cubic-bezier函数。最后,给出了一个实际的代码示例,演示了鼠标悬停时元素位置变化的过渡动画。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML CSS 过渡效果

1、transition

过渡(transition): 通过过渡可以指定一个元素的属性在发生变化时的切换方式,从而创建一些非常好的效果,提升用户的体验。如:

transition: height 2s; /*当元素的高度放生变化时,需要花费两秒钟的时间来进行过渡。*/

这种方式可以同时设置过渡相关的所有属性,只有一个要求,如果要写延迟,则两个时间中第一个是持续时间,第二个表示延迟时间。

transition: 2s margin-left 1s; /*表示当元素的margin-left属性值发生变化时,延迟1秒后,开始过渡,持续时间为2秒*/

2、另外一种设置的方式:

transition-property: 指定要执行过渡的属性,如:transition-property: width, height。

可以同时指定宽度和高度,多个属性之间使用逗号进行隔开,如果所有的属性都需要过渡,则可以使用 all 关键字,大部分的属性都支持过渡效果(基本上可计算的读可以设置),注意的是过渡是必须从一个有效值向另外一个有效值进行过渡,如auto就不是一个有效值,即它的值是不确定的;

transition-duration: 指定过渡效果的持续时间,如:transition-duration: 2s;指定持续时间为2秒。

时间单位:s和ms,1s = 1000ms,也可以为transition-property的多个属性之间分别设置不同的过渡时间,通过transition-duration属性指定多个值,中间使用逗号隔开,这里多个值之间的顺序和transition-property指定的属性之间一一对应;

transition-timing-function: 指定过渡的时序函数,即过渡的执行方式,可选值如下:

  • ease,默认值,慢速开始,先加速,后减速;
  • linear,匀速运动;
  • ease-in,加速运动;
  • ease-out,减速运动;
  • ease-in-out,先加速,后减速;
  • cubic-bezier(),来指定时序函数,如:transition-timing-function: cubic-bezier(0,0,1,1);其中的值可以在https://cubic-bezier.com/网址中进行获取;
  • steps(),分步执行过渡效果;如transition-timing-function: steps(2);分两步来执行过渡效果,在steps函数中可以指定两个值,第一个指定的是过渡的步数,第二个指定是在某个时间之前还是之后执行,可选值:start、end(默认值)。如:steps(2, start)可以理解为在第一秒开始之前走第一步,在第二秒开始之前走第二步;

transition-delay: 过渡效果的延迟,即等待多长一段时间之后开始执行过渡效果。如:transition-delay: 2s;表示等待2秒钟之后开始执行过渡效果;

练习代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100%;
            height: 500px;
            background-color: silver;
        }
        .box1 div{
            width: 100px;
            height: 100px;
        }
        .box2{
            background-color: #bfa;
            margin-bottom: 100px;
            /* transition: all 2s; */
            /* transition-property: width, height; */
            margin-left: 0;
            /* transition-duration: 2s; */
            /* transition-timing-function: steps(2, end); */
            /* transition-delay: 2s; */
            transition: 2s margin-left 1s;
        }
        .box3{
            margin-left: 0;
            background-color: orange;
            transition-property: all;
            transition-duration: 2s;
        }
        .box1:hover .box2,
        .box1:hover .box3{
            margin-left: 1266px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值