html&css反向悬停效果案例

最新推荐文章于 2025-12-02 22:10:11 发布

原创最新推荐文章于 2025-12-02 22:10:11 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

前端案例专栏收录该内容

5 篇文章

订阅专栏

此博客介绍了如何使用HTML和CSS创建一个反向悬停效果的导航菜单。通过CSS的transform属性和过渡效果，当鼠标悬停在链接上时，背景颜色从右侧向左侧平滑展开。代码示例中展示了不同颜色的链接在悬停时的变化，适用于网页设计和前端开发的学习者。

接下来练习反向悬停效果案例

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <ul>
 	<li><a href="#">首页</a></li>
 	<li><a href="#">首页1</a></li>
 	<li><a href="#">首页2</a></li>
 	<li><a href="#">首页3</a></li>
 	<li><a href="#">首页4</a></li>
 </ul>
</body>
</html>

CSS代码：

body
{
	margin: 0;
	padding: 0;
	background: #262626;
}
ul
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin: 0;
	padding: 0;
	display: flex;
}
ul li
{
    list-style: none;
}
ul li a
{
	position: relative;
	display: block;
	width: 150px;
	height: 80px;
	line-height: 80px;
	text-align: center;
	font-size: 16px;
	color: #fff;
	font-family: sans-serif;
	text-decoration: none;
	border: 1px solid #000;
	border-right: none;
	transition: .5s;
}
ul li:last-child a 
{
	border-right: 1px solid #000;
}
ul li a:before
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #f00;
	overflow: hidden;
	z-index: -1;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.5s ease-in-out;
}
ul li a:hover:before
{
   transform: scaleX(1);
   transform-origin: left;
}
ul li:nth-child(1) a:before
{
	background: #3b5999;
}
ul li:nth-child(2) a:before
{
	background: #55acee;
}
ul li:nth-child(3) a:before
{
	background: #dd4b39;
}
ul li:nth-child(4) a:before
{
	background: #0077B5;
}
ul li:nth-child(5) a:before
{
	background: #e4405f;
}