css3过渡之滑动logo

css3过渡效果练习,实现双logo滑动切换


  整体思路:

  1. 先准备一个父盒子box用于呈现logo,溢出部分隐藏

  2. 放入子盒子son,宽度为box的两倍,用于logo之间的来回切换

  3. 给son盒子添加浮动,使son盒子浮动在box盒子上

  4. 在son盒子中插入logo1,logo2

  5. 通过a:hover、margin来实现移动

  6. 添加过渡transition完成装饰


     

     代码:

        <title>logo</title>
        <style>
            .box {
                width: 100px;
                height: 100px;
                overflow: hidden;
                margin: 0 auto;
            }
    
            .son {
                float: left;
                width: 200px;
                height: 100px;
                transition: all 0.5s;
            }
    
            .son img {
                width: 100px;
                height: 100px;
            }
    
            .box:hover .son {
                margin-left: -100px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div class="son">
                <img src="../../image/logo1.jpg" alt=""><img src="../../image/logo2.jpg" alt="">
            </div>
    
        </div>
    </body>
    

    ps:也可以用精灵图做哦

新手上路,分享心得,如果小伙伴们有更好的做法,或者文章有什么错误,欢迎在评论区分享探讨呀

相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页