css过度效果

最新推荐文章于 2024-09-27 11:50:10 发布

明阳mark

最新推荐文章于 2024-09-27 11:50:10 发布

阅读量190

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_36939013/article/details/106011067

版权

css 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

<!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>
        *{
            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;
        }
        .box2{
            background-color: #bfa;
            /* margin-left: 700px; */

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

            /* transition-property: 指定要执行过的的属性
               多个属性用,隔开
               如果所有属性都需要过度，使用all关键字
               大部分属性都支持过度效果
               可以计算的都可以 像素 角度 颜色
               注意过度是必须是从一个有效数值向另外一个有效数值进行过度
             */
            /* transition-property: width, height; */
            transition-property:all;

            /* 
               transition-duration: ;指定过度效果的持续时间 
               单位: s和ms 1s = 1000ms
            */
            /* transition-duration: 200ms,20s; */
            transition-duration: 2s;
            /* transition-timing-function: 过度的时间函数
                指定过度的执行方式  
                可选值：
                     ease 默认值， 慢速开始， 先加速，再减速
                     linear 匀速运动
                     ease-in 加速运动
                     ease-out 减速运动
                     ease-in-out 先加速后减速

             */
            /* transition-delay: ; */

            transition-timing-function: ease-in-out;
        }

        .box1:hover div{
            /* width: 200px;
            height: 300px; */
            margin-left: 700px;
        }
        .box3{
            background-color: orange;
            transition-property: all;
            transition-duration: 2s;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>