仿小米logo切换

最新推荐文章于 2022-10-02 01:45:00 发布

她还会来吗

最新推荐文章于 2022-10-02 01:45:00 发布

阅读量345

点赞数 1

分类专栏： CSS # CSS3

本文链接：https://blog.youkuaiyun.com/m0_53895172/article/details/115741170

版权

CSS3 同时被 2 个专栏收录

9 篇文章

订阅专栏

CSS

5 篇文章

订阅专栏

本文介绍了两种实现图片切换效果的方法：一种利用CSS伪元素和过渡效果实现类似小米Logo的滑动切换；另一种通过HTML和JavaScript实现简单的类轮播图效果，通过鼠标移入移出事件改变图片位置。示例代码详细展示了具体实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天看博客的时候发现类似于小米logo切换的效果,所以就心血来潮,写下这篇博客,。话不多说直接上代码了冲冲冲！！！！

运行效果

在这里插入图片描述

伪元素实现

该方法主要在于为盒子设置伪元素,并给伪元素设置背景,利用hover实现伪元素的切换,从而实现滑动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav{
            position: relative;
            width: 55px;
            height: 55px;
            background-color: lightblue;
            margin: 100px auto;
            overflow: hidden;
            /* 过渡属性 */
            transition: all .3s;
        }
        /*给盒子设置伪元素,为的是实现切换效果 */
        .nav::before,.nav::after{
            position: absolute;
            content:"";
            width: 55px;
            height: 55px;
            background-color: pink;
        }
        .nav::before{
            right: 55px;
            background-image: url('./image/img4-small.jpg');
            background-size: cover;
        }
        .nav::after{
            left: 0;
            background-image: url('./image/pig.jpg');
            background-size: contain;
        }
        .nav:hover::before{
           right: 0;
        }
        .nav:hover::after{
           left:-55px;
        }
    </style>
</head>
<body>
    <div class="nav"></div>
</body>
</html>

类轮播图实现

该实现原理就是设置一个父盒子,然后给其子盒子中放置两张图片,给子盒子设置样式,让其中的img元素浮动起来，在父元素中排列成一行;随后给父元素设置overflow溢出效果,在js中获取元素，设置鼠标移入移出事件，最终实现想要的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .banner{
            width: 50px;
            height: 50px;
            margin: 100px auto;
            overflow: hidden;
        }
        .imgs{
            width: 100px;
            height: 50px;
            /* margin-top: 0; */
        }
        .imgs img{
            float: left;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="banner">
        <div class="imgs">
            <img src="./image/pig.jpg" alt="">
            <img src="./image/img4-small.jpg" alt="">
        </div>
    </div>
</body>
<script>
    var div = document.querySelector('div');
    var imgs = document.querySelector('.imgs')
    div.addEventListener('mouseover',function(){
        imgs.style.marginLeft = '-50px';
    })
    div.addEventListener('mouseout',function(){
        imgs.style.marginLeft = '0px';
    })
</script>
</html>