实现小米logo渐变的效果

最新推荐文章于 2021-08-04 17:37:17 发布

漫漫逆袭路

最新推荐文章于 2021-08-04 17:37:17 发布

阅读量627

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/weixin_45558236/article/details/108061980

版权

css 专栏收录该内容

3 篇文章 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>
      

        .red {
            width: 50px;
            height: 50px;
            background-color: red;
            /* visibility: hidden; */
            transition: margin-left 2s;
           float: left;
            margin-left: 0px
                /* transition: ; */
        }
        .box:hover .red{
            margin-left: 50px;
        }
        .box:hover .black{
            background-color: pink;
        }


            /* .red:hover{

                margin-left: 50px;
            } */

        .box {
            width: 50px;
            height: 50px;
            background-color: pink;
            overflow: hidden;
            position: relative;
        }

       

        .black {
            width: 50px;
            height: 50px;
            background-color: black;
           float: left;
           transition:background-color 2s ;
           

        }
    </style>
</head>

<body>

    <div></div>

    <p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>

    <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>


    <div class="box">
        <div class="red"></div>
        <div class="black"></div>
    </div>


</body>

</html>