页面过渡属性

最新推荐文章于 2022-10-12 19:52:35 发布

代码编编◐

最新推荐文章于 2022-10-12 19:52:35 发布

阅读量64

点赞数

分类专栏：笔记文章标签： html5

本文链接：https://blog.csdn.net/wqy18378671261/article/details/117636834

版权

笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文深入探讨了CSS过渡中的transition-timing-function属性，通过实例展示了linear、ease、ease-in、ease-out和ease-in-out五种不同速度曲线的效果，帮助读者理解如何控制元素过渡过程中的速度变化。

摘要由CSDN通过智能技术生成

使用过渡时，浏览器需要为每个样式属性计算初始值和最终值之间的中间值。
可使用transition-timing-function 属性指定，其取值如下：
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡属性</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 600px;
            height: 400px;
            border: 1px solid #cccccc;
        }
        .container div{
            width: 100px;
            height: 50px;
            background: deepskyblue;
            margin-top: 10px;

            text-align: center;
            line-height: 50px;
            color: #ffffff;
        }
        .container:hover .box1{
            margin-left: 600px;
            /* transition: transition-property, transition-duration, transition-timing-function, transition-delay */
            /* transition: 什么属性执行过渡效果, 持续时间,  过渡的速度, 延迟时间 */
            transition: all 10s linear 100ms;
        }
        .container:hover .box2{
            margin-left: 600px;
            /* transition: transition-property, transition-duration, transition-timing-function, transition-delay */
            /* transition: 什么属性执行过渡效果, 持续时间,  过渡的速度, 延迟时间 */
            transition: all 10s ease 100ms;
        }
        .container:hover .box3{
            margin-left: 600px;
            /* transition: transition-property, transition-duration, transition-timing-function, transition-delay */
            /* transition: 什么属性执行过渡效果, 持续时间,  过渡的速度, 延迟时间 */
            transition: all 10s ease-in 100ms;
        }
        .container:hover .box4{
            margin-left: 600px;
            /* transition: transition-property, transition-duration, transition-timing-function, transition-delay */
            /* transition: 什么属性执行过渡效果, 持续时间,  过渡的速度, 延迟时间 */
            transition: all 10s ease-out 100ms;
        }
        .container:hover .box5{
            margin-left: 600px;
            /* transition: transition-property, transition-duration, transition-timing-function, transition-delay */
            /* transition: 什么属性执行过渡效果, 持续时间,  过渡的速度, 延迟时间 */
            transition: all 10s ease-in-out 100ms;
        }
    </style>
</head>
<body>
    <!-- 
        过渡速度值：
        linear =》以相同速度开始和结束（一条线上的速度变） =》【匀速】变化 
        ease =》慢速开始，加速，慢速结束
        ease-in =》慢速开始
        ease-out =》慢速结束
        ease-in-out =》慢速开始，慢速结束
     -->
    <div class="container">
        <div class="box1">linear</div>
        <div class="box2">ease</div>
        <div class="box3">ease-in</div>
        <div class="box4">ease-out</div>
        <div class="box5">ease-in-out</div>
    </div>
</body>
</html>