23过渡——HTML

最新推荐文章于 2024-07-25 11:52:08 发布

StudiousTiger

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量100

点赞数

文章标签： html css3 css html5

本文链接：https://blog.csdn.net/m0_45067620/article/details/107168912

版权

Tiger の HTML&CSS 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

<!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>
        .box1{
            width: 1300px;
            height: 500px;
            background-color: silver;
            overflow: hidden;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgb(236, 154, 47);
            margin-left: 0;
            margin-top: 50px;
            /* transition-property: ; 设置需要过渡效果的属性属性 property(属性) 
                                    all表示所有属性
            */
            transition-property: margin;

            /* transition-duration: ; 设置过渡所用的时间 duration(持续)
                                    单位：m  ms
            */
            transition-duration: 2s;
            
            /* transition-timing-function: ;过渡的时序函数 
                    可选值：
                            ease            默认值，慢->快->慢
                            linear          匀速运动
                            ease-in         加速运动 慢->快
                            ease-out        减速运动  快->慢
                            ease-in-out     先加速，再减速
                            cubic-bezier()  来制定时序函数
                                辅助网站：https://cubic-bezier.com
                            steps(n) 分步执行过渡效果,n是分步的次数
                            steps(n，y) 分步执行过渡效果,n是分步的次数
                                y的可选值：
                                    end  在时间结束时执行过渡效果（默认）
                                            比如:10s完成过渡，设置steps(5，end)，那么就会第5s执行一次，第10s执行一次
                                    start 在时间开始时执行过渡效果
                                            比如:10s完成过渡，设置steps(5，start)，那么就会第0s执行一次，第5s执行一次
            */
             transition-timing-function: ease-out;
             
            /* transition-delay: ;  表示过渡效果的延迟  delay（延期，推迟）*/


            /* transition  可以同时设置过渡的相关属性
                注意：duration和delay都是时间单位，第1个时间代表duration，第2个时间地表delay
             */
        }
        .box3{
            width: 100px;
            height: 100px;
            background: tomato;
            margin-left: 0;
            margin-top: 50px;
            transition-property: margin;
            transition-duration: 2s;
            transition-timing-function: ease-in;
        }
        .box4{
            width: 100px;
            height: 100px;
            background: tomato;
            margin-left: 0;
            margin-top: 50px;
            transition-property: width;
            transition-duration: 3s;
            transition-timing-function: ease-in;
            /* transition-delay: ;  表示过渡效果的延迟  delay（延期，推迟）*/
            transition-delay: 1s;
        }
        .box1:hover .box2,
        .box1:hover .box3{
            margin-left: 1200px;
        }
        .box1:hover .box4{
            width: 1300px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>    
    </div>
</body>
</html>

StudiousTiger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
23过渡——HTML

<!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> .box1{
复制链接

扫一扫

专栏目录