38.html5的过渡（transition）

最新推荐文章于 2024-04-18 20:51:51 发布

Keeling1720

最新推荐文章于 2024-04-18 20:51:51 发布

阅读量2.4k

点赞数 1

分类专栏： HTML5+CSS

本文链接：https://blog.csdn.net/weixin_44741023/article/details/116394458

版权

HTML5+CSS 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

文章目录

html5的过渡（transition）

html5的过渡（transition）

过渡（transition）：通过过渡可以指定一个元素发生变化时的切换方式，从而创建一些比较好的效果，提升用户的体验。

transition-property（指定要执行过渡的属性）

transiton-duration（指定过渡效果的持续时间）

属性transition-property和 transiton-duration这两个得一起使用才有效。因为你得告诉系统你要过渡什么属性，过渡所用时间为多少，系统才能够为你准确的实现。
注意：大部分属性都支持过渡效果，但是过度时必须时从一个有效数值向另一个有效数值进行过渡。
格式：

transition-property:属性1，属性2，。。。,属性n;(所有的属性都想用过渡那么就直接写all）
transition-duration: N s/ms;(秒和毫秒，1s=1000ms,N是常数)

例子：

.box2{
	transition-property:width, height;
	transition-duration:2s;
}

完整例子1：（实现方块的变大缩小）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .box1{
            width: 600px;
            height: 600px;
            background-color: grey;
            overflow: hidden;
        }

        .box2{
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
            background-color: orange;
            /*设置过渡属性和时间*/
            transition-property: width, height;
            transition-duration: 2s;
        }

        /*当鼠标移入.box1的时候，.box2的宽高都变为200px*/
        .box1:hover .box2{
            width: 200px;
            height: 200px;
        }


    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

显示：（图片会慢慢变大，耗时2s，等变到200px * 200px的时候，就会停下来，当你把鼠标移出.box1的时候，又会重新变回100px * 100px）
在这里插入图片描述

完整例子2（实现方块的移动）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .box1{
            width: 600px;
            height: 600px;
            background-color: grey;
            overflow: hidden;
        }

        .box2{
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
            background-color: orange;
            /*设置过渡属性和时间*/
            /*transition-property: width, height;*/
            transition-property: margin;
            transition-duration: 2s;
            margin-left: 0px;
        }

        /*当鼠标移入.box1的时候，.box2的宽高都变为200px*/
        .box1:hover .box2{
            /*width: 200px;*/
            /*height: 200px;*/
            margin-left: 500px;
        }


    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

显示：（从左向右滑动）
在这里插入图片描述

在这里插入图片描述

transition-timing-function(过渡的时序函数）

transition-timing-function：指定过渡的执行方式，可选值：

ease：慢速开始，先加速后减速（默认）
linear：匀速运动
ease-in：加速运动
ease-out：减速运动
ease-in-out：先加速后减速
cubic-bezier（）来指定时序函数
时序函数的值可以参考网址：https://cubic-bezier.com/

在这里插入图片描述

steps(N)：分步执行过渡效果（瞬变N次，最后一次到达终点）
也可以设置第二个参数（start或者end），比如：
steps(2, start)，表示分两步进行，在每一秒的刚开始就动，大概1.01s到；
steps(2, end)，表示分两步进行，在每一秒刚结束才动，大概2s到。

这些个效果还是自己测试效果会好一些，就不给出截图了，直接贴一段代码，有兴趣的可以自行更换属性的值进行查看。（.box3是用来做参照物的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .box1{
            width: 600px;
            height: 600px;
            background-color: grey;
            overflow: hidden;
        }

        .box2{
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
            background-color: orange;
            /*设置过渡属性和时间*/
            /*transition-property: width, height;*/
            transition-property: margin;
            transition-duration: 2s;
            transition-timing-function: steps(2,start);
            margin-left: 0px;
        }

		/*参照物*/
        .box3{
            width: 100px;
            height: 100px;
            background-color: tomato;
            transition-property: margin;
            transition-duration: 2s;
            transition-timing-function: linear;
            margin-left: 0px;
        }

        /*当鼠标移入.box1的时候，.box1下的div标签都向右移动500px*/
        .box1:hover div{
            margin-left: 500px;
        }


    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

transition-delay(过渡效果的延迟）

transition-delay：等待一段时间后再执行过程。
用法：transition-delay:Ns/ms(N是常数，s是秒，ms是毫秒)
比较简单，不多做介绍

transition(过渡的简写）

transition：可以同时设置过渡相关的所有属性，但是：只写一个时间代表过渡时间，写两个时间的话，第一个时间是过渡时间，第二个时间表示延迟时间。
针对上面的设置：

transition-property: margin;
transition-duration: 2s;
transition-timing-function: steps(2,start);
transition-delay: 2s;

我们可以简写成：

transition: margin 2s 2s steps(2,start);

Keeling1720

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
38.html5的过渡（transition）

文章目录html5的过渡（transition）transition-property（指定要执行过渡的属性）transiton-duration（指定过渡效果的持续时间）transition-timing-function(过渡的时序函数）transition-delay(过渡效果的延迟）transition(过渡的简写）html5的过渡（transition）过渡（transition）：通过过渡可以指定一个元素发生变化时的切换方式，从而创建一些比较好的效果，提升用户的体验。transition-
复制链接

扫一扫