0
点赞
收藏
分享

微信扫一扫

HTML CSS 过渡效果

janedaring 2022-02-12 阅读 70

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>
举报

相关推荐

0 条评论