HTML代码
html
<ul>
<li>
<p><a href="#">Facebook搜索</a></p>
</li>
<li>
<p><a href="#">Instagram搜索</a></p>
</li>
<li>
<p><a href="#">Google搜索</a></p>
</li>
<li>
<p><a href="#">YellowPage搜索</a></p>
</li>
<li>
<p><a href="#">Yelp搜索</a></p>
</li>
<li>
<p><a href="#">WhatsApp搜索</a></p>
</li>
<li>
<p><a href="#">群发消息</a></p>
</li>
</ul>
CSS代码
css
ul li{
cursor: pointer;
width: 45%;
padding: 30px;
display: flex;
margin-bottom: 20px;
border-radius: 20px;
box-shadow: 0 10px 10px #ECEFF7;
transition: all 0.5s;
background: linear-gradient(to right, transparent 0%, transparent 100%);
position: relative;
overflow: hidden;
}
ul li::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent 0%, #4095E5 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s;
z-index: 0;
}
ul li:hover::before {
transform: scaleX(1);
}
ul li:hover{
transform: scale(1.05);
/* background: linear-gradient(to right, transparent 0%, #4095E5 100%); */
}
ul li * {
position: relative;
z-index: 1;
}
效果图