过渡效果

最新推荐文章于 2024-02-08 19:23:22 发布

我的哥哥呦

最新推荐文章于 2024-02-08 19:23:22 发布

阅读量714

点赞数

分类专栏： H5C3 文章标签： transition-property transition-duration transition-timing-function transition-delay

本文链接：https://blog.csdn.net/qq_20497071/article/details/97499904

版权

H5C3 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 100px;
            top: 100px;
            /*添加过渡效果:过渡效果执行完毕之后，默认会还原到原始状态*/
            /*1.transition-property:添加过渡效果的样式属性名称*/
            /*transition-property: left;*/
            /*2.transition-duration:过渡效果的耗时 以秒做为单位*/
            /*transition-duration: 2s;*/
            /*3.transition-timing-function:设置时间函数--控制运动的速度*/
            /*transition-timing-function: linear;*/
            /*4.transition-delay:过渡效果的延迟*/
            /*transition-delay: 2s;*/

            /*简写：transition:属性名称 过渡时间  时间函数  延迟*/
            /*transition: left 2s linear 0s;*/

            /*为多个样式同时添加过渡效果*/
            /*transition: left 2s linear 0s,background-color 5s linear 0s;*/

            /*为所有样式添加过渡效果 all:所有样式
            1.所有样式的过渡效果一样
            2.效率低下，它会去查询所有添加的样式
            3.建议：以后不要这么写
            4.steps(4):可以让过渡效果分为指定的几次来完成*/
            transition:all 2s steps(4);
            -moz-transition: all 2s steps(4);
            -webkit-transition: all 2s steps(4);
            -o-transition: all 2s steps(4);
        }
       /*单击*/
        div:active{
            left: 1000px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>