纯CSS3实现鼠标悬浮内容自动撑开的过渡动画_css悬停放大字时挤开其他部分-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44601948/article/details/106137812

本文介绍如何使用CSS3的max-height属性和transition来创建一个具有平滑过渡效果的下拉菜单。通过设置元素的最大高度并在鼠标悬停时改变此属性，可以实现菜单项的动态展开和收缩，无需指定具体的高度值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用 CSS3 实现的，由于高度的不确定，而 transtion 是需要具体的树枝，所以可以通过 max-height 这个属性间接的实现这么个效果

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul,
			li {
				list-style-type: none;
			}

			body {
				-moz-user-select: none;
				/*火狐*/
				-webkit-user-select: none;
				/*webkit浏览器*/
				-ms-user-select: none;
				/*IE10*/
				-khtml-user-select: none;
				/*早期浏览器*/
				user-select: none;
				-webkit-touch-callout: none;
				/*手机端*/
				height: 100%;
				background-image: url("http://img1.imgtn.bdimg.com/it/u=1655353947,3571980950&fm=26&gp=0.jpg");
				background-repeat: no-repeat;
				background-size: cover;

			}

			#box {
				width: 200px;
			}

			li {
				color: #00BCD4;
				line-height: 40px;
				padding-left: 30px;
			}

			.td {
				max-height: 0;
				overflow: hidden;
				transition: all 5s ease-in;
			}

			li:hover {
				cursor: pointer;
				color: #FFFFFF;
			}

			li:hover .td {
				background-color: rgba(0, 0, 0, 0.2);
				max-height: 9999px;
				transition-timing- function:ease-out;
			}
		</style>
	</head>
	<body>
		<ul id="box">
			<li class="box-item">
				<div class="hd">战士</div>
				<ul class="td">
					<li>露娜</li>
					<li>花木兰</li>
					<li>白起</li>
				</ul>
			</li>
			<li class="box-item">
				<div class="hd">刺客</div>
				<ul class="td">
					<li>李白</li>
					<li>百里玄策</li>
					<li>荆轲</li>
				</ul>
			</li>
			<li class="box-item">
				<div class="hd">法师</div>
				<ul class="td">
					<li>小巧</li>
					<li>沈梦希</li>
					<li>安其拉</li>
				</ul>
			</li>
			<li class="box-item">
				<div class="hd">射手</div>
				<ul class="td">
					<li>阿狸</li>
					<li>马克</li>
					<li>萌芽</li>
				</ul>
			</li>
			<li class="box-item">
				<div class="hd">辅助</div>
				<ul class="td">
					<li>孙膑</li>
					<li>蔡文姬</li>
					<li>鬼谷子</li>
				</ul>
			</li>
		</ul>
	</body>
	<script>
		let lg = function() {
			return console.log(...arguments)
		}
		let box = document.querySelector('#box')
		box.addEventListener('click', function(e) {
			alert(e.target.innerText)
		})
	</script>
</html>