仿小米logo切换

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

运行效果

仿小米logo切换_第1张图片

伪元素实现

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


<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>Documenttitle>
    <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中获取元素,设置鼠标移入移出事件,最终实现想要的效果。


<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>Documenttitle>
    <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>

你可能感兴趣的:(CSS,#,CSS3)