html - 这种css3实现的鼠标滑过的动态效果怎么写？

问题描述

问 题

滑过之前是空白的，滑过之后，就是从左往右扫

好心人，求思路和主要代码

解决方案

思路应该挺多的。
用伪类也可以，原理和Dont的差不多，用translate位移也行，用width从0到100%也行。

html

 <a>Login</a>

style

a {
    display:inline-block;
    position:relative;
}
a:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;bottom: 0;left: 0;
    width: 0;
    transition: all 0.5s;
    background: rgba(0,0,0,0.1);
}
a:hover:after{
    background: rgba(0,0,0,0.3);
    width:100%
}

这篇关于html - 这种css3实现的鼠标滑过的动态效果怎么写？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！