CSS3过渡应用

时间：2021-04-11 21:47:03 阅读：34 评论：0 收藏：0 [点我收藏+]

小米图标转换

transition:需要过渡的属性花费时间（运动曲线何时开始）；

Tips：
1.第二个属性值必须跟上单位（s）
2.谁要过渡给谁加
图标转换最终效果：当鼠标划过图标时，缓慢转换成另一个图标

步骤

一、准备一个大盒子，大盒子里有一个小盒子，小盒子里再放两个单独放图标的小盒子

<body>
    <section class="logo">
        <div class="both">
            <div class="left">?</div>
            <div class="right">?</div>
        </div>
    </section>
</body>

二、给盒子设置合适的宽、高、外边距，小盒子与大盒子同高，同时小盒子的宽是大盒子的两倍

.logo {
            width: 56px;
            height: 56px;
            margin: 20px auto;
            background-color: rgb(255, 111, 55);
            line-height: 56px;
            border-radius: 16px;
        }

        .both {
            width: 112px;
            height: 56px;
            font-family: ‘icomoon‘;
            font-size: 45px;
            text-align: center;
        }

三、给两个图标盒子添加浮动，使他们在小盒子中一行显示，同时设置合适的padding值，使其在转换时实现一个图标占据大盒子

.left,
        .right {
            float: left;
            padding: 0 5px;
        }

四、设置触发条件，当鼠标划过大盒子时，小盒子向左移动大盒子宽度的长度

    .logo:hover .both {
            margin-left: -56px;
        }

技术分享图片

五、为了实现更好的效果，给小盒子添加过渡使其图标转换更加自然。给大盒子添加溢出隐藏，使页面只显示一个图标

        .logo {
            width: 56px;
            height: 56px;
            margin: 20px auto;
            background-color: rgb(255, 111, 55);
            line-height: 56px;
            border-radius: 16px;
            overflow: hidden;
        }
        
        .both {
            width: 112px;
            height: 56px;
            font-family: ‘icomoon‘;
            font-size: 45px;
            text-align: center;
            transition: all .7s;
        }

技术分享图片