2021-08-15

标题利用过渡制作小米logo效果

html

<div class="aaa">
        <div class="huakuai">
            <span>图标1</span><span>图标2</span>
        </div>
</div>

css

		.aaa {
            position: relative;
            height: 50px;
            width: 50px;
            background: #ff6a00;
            overflow: hidden;
        }
        
        .huakuai {
            position: absolute;
            top: 0px;
            left: -50px;
            height: 50px;
            width: 100px;
        }
        
        .huakuai span {
            display: inline-block;
            color: black;
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 30px;
            text-align: center;
        }
        
        .aaa:hover .huakuai {
            left: 0px;
            transition: left .5s;
        }

图标自行添加呦！