css3过渡之滑动logo

最新推荐文章于 2024-04-23 16:51:05 发布

Kun_912

最新推荐文章于 2024-04-23 16:51:05 发布

阅读量306

点赞数

分类专栏： css 文章标签： css3 html5

本文链接：https://blog.csdn.net/Kun_912/article/details/115919779

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

整体思路：

先准备一个父盒子box用于呈现logo，溢出部分隐藏
放入子盒子son，宽度为box的两倍，用于logo之间的来回切换
给son盒子添加浮动，使son盒子浮动在box盒子上
在son盒子中插入logo1，logo2
通过a：hover、margin来实现移动

添加过渡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：也可以用精灵图做哦

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

Kun_912

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3过渡之滑动logo

css3过渡效果练习，实现双logo滑动切换整体思路：先准备一个父盒子box用于呈现logo，溢出部分隐藏放入子盒子son，宽度为box的两倍，用于logo之间的来回切换给son盒子添加浮动，使son盒子浮动在box盒子上在son盒子中插入logo1，logo2 通过a：hover、margin来实现移动添加过渡transition完成装饰代码： <title>logo</t...
复制链接

扫一扫