01.过渡.html

最新推荐文章于 2025-08-22 18:28:10 发布

原创最新推荐文章于 2025-08-22 18:28:10 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #html

HTML+CSS_08_animation 专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了CSS中的过渡效果，包括transition-property、transition-duration、transition-timing-function和transition-delay属性的使用，展示了如何通过这些属性实现元素状态变化时的平滑过渡，提升网页交互体验。示例代码详细解释了如何在鼠标悬停时改变盒子尺寸和位置，呈现丰富的视觉效果。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            transition-property
            transition-duration
            transition-timing-function
            transition-delay
        */
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 800px;
            height: 800px;
            background-color: silver;
            overflow: hidden;
        }
        .box1 div{
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
            margin-left: 0;
            /* margin-left: 700px; */
        }
        .box2{
            background-color: #bfa;



            /* transition: all 2s; */
            /* 
                过渡（transition）
                    - 通过过渡我们可以指定一个属性发生变化时的切换方式
                    - 通过过渡可以创建一些非常好的效果，提升用户体验
             */



            /* 
                transition-property:  
                    - 默认值all
                    - 指定要执行过渡的属性
                    - 多个属性之间用逗号隔开
                    - 如果所有属性都需要过渡，则用all关键字
                    - 大部分属性都支持过渡效果，注意过渡时必须是从一个有效值向另一个有效值进行过渡(比如auto就不是一个有效值)
            */
            /* transition-property: height,width; */
            /* transition-property: all; */



            /* 
                transition-duration:  
                    - 默认值是0
                    - 指定过渡效果的持续时间
                    - 时间单位s和ms  1s=1000ms
                    
            */
            /* transition-duration: 100ms,2s;(可以分别为property中列出的每个属性指定duration) */
            /* transition-duration: 2s; */



            /* 
                transition-timing-function:  过渡的时序函数
                    - 指定过渡的执行方式
                    - 可选值
                        ease 默认值 慢速开始，然后先加速，再减速
                        linear 匀速运动
                        ease-in 加速运动
                        ease-out 减速运动
                        ease-in-out 先加速后减速
                        cubic-bezier() 用贝塞尔曲线来指定时序函数
                            https://cubic-bezier.com
                        steps() 分步执行过渡效果
                            括号中可以设置第二个值
                                end（默认值） 和 start
                                假设需要2s，steps(2,start)表示在t=0和t=1s时执行
                                        steps(2,end)表示在t=1s和t=2s时执行
            
            */
            /* transition-timing-function: cubic-bezier(.2,1.11,.95,-0.66); */
            /* transition-timing-function: steps(2,start); */



            /* 
                transition-delay:  过渡效果的延迟
                    等待一段时间以后再执行过渡
             */
            /* transition-delay: 2s; */



            /* 以上四个属性一般直接合写为一个transition */
            /* 
                transition是一个简写属性，可以同时设置与过渡相关的属性
                没有顺序要求，但注意一点：如果要写延迟，则两个时间中，第一个是持续时间，第二个是延迟
             */
            transition: 2s margin-left cubic-bezier(.17,.67,.83,.67);
        }
        .box3{
            background-color: orange;
            transition-property: all;
            transition-duration: 2s;
        }
        .box1:hover div{
            width: 200px;
            height: 200px;
            background-color: chocolate;
            /* margin-left: 0; */
            margin-left: 700px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>