您的位置: 首页  >  IT文章  >  布局总结六：图标左右hover切换---通过after和before伪元素，动画margin-left参数 效果图 1.html布局代码 2.css代码

布局总结六：图标左右hover切换---通过after和before伪元素，动画margin-left参数 效果图 1.html布局代码 2.css代码

分类: IT文章 • 2022-06-01 20:45:40

布局总结六：图标左右hover切换---通过after和before伪元素，动画margin-left参数 效果图 1.html布局代码 2.css代码

1.html布局代码

                <div class="log">
                    <a href="javascript:;"></a>
                </div>

2.css代码

            .log{
                width: 55px;
                height: 55px;
                display: inline-block;
                background-color: $colorA;
                a{
                    display: inline-block;
                    width: 110px;
                    height: 55px;
                    &:before{
                        content: '';
                        @include imgIcon(55px, 55px, "/imgs/mi-home.png", center, contain);
                        transition: 1s;
                    }
                    &:after{
                        content: '';
                        @include imgIcon(55px, 55px, "/imgs/mi-logo.png", center, contain);
                    }
                    &:hover:before{
                        margin-left: -55px;
                        transition: 1s;
                    }
                }
            }

其中imgIcon函数作为mixin引入的，如下

@mixin imgIcon($w:0,$h:0,$url:'',$position:center,$size:cover){
    display:inline-block;
    width:$w;
    height:$h;
    background-image:url($url);
    background-repeat:no-repeat;
    background-position:$position;
    background-size:$size;
}

相关推荐