介绍
鼠标移入元素时,背景颜色从左侧滑倒右侧水平过渡
代码
html:
<div class="bg"></div>
css:
:root{
--normal-color: pink;
--active-color: blue;
}
.bg{
position: relative;
width: 100px;
height: 30px;
background-color: var(--normal-color);
}
.bg:before,.bg:after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background: var(--normal-color);
z-index: -1;
}
.bg:before{
z-index: 1;
background: var(--active-color);
transition: 1s;
}
.bg:hover{
background: transparent;
}
.bg:hover:before,.bg:hover:after{
width:100%;
}