css - 在悬停时使用过渡时如何使元素保持原位
问题描述
使用 :hover 应用转换时,如何使 li 元素不移动?这些圆圈是通过对 li 元素应用高度和边框半径来制作的。我试过让 ul 容器更大,但这似乎没有用。谢谢你的帮助。
代码:
body {}
main {
display: flex;
background: #eeeeee;
min-height: 100vh;
padding: 1em;
}
h1 {
font-family: arial;
font-size: 1.4em;
padding-left: 1em;
}
ul {
padding-top:50px;
min-height: 600px;
position:relative;
}
li {
position:relative;
background-color: purple;
border-radius: 50%;
width: 50px;
height: 50px;
padding: 1em;
text-align: center;
list-style: none;
display: inline-block;
line-height: 50px;
border: 5px solid red;
margin-right: -1em;
z-index: 0;
transition: width 0.5s, height 0.5s, background-color 1s, line-height 0.5s;
}
li:hover {
display: inline-block;
position:relative;
width: 90px;
height: 90px;
z-index: 10;
background-color: green;
line-height: 90px;
}
<body>
<main>
<h1>
My animated Menu
</h1>
<div class="menu">
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</div>
</main>
</body>
解决方案
使用CSS3 变换,这样元素可以自由移动或缩放到 DOM 中,而不会影响布局大小。
一个不错的好处:动画在 fps 方面将更加高效,因为不会在每一帧上重新计算布局(将使用 GPU)
ul {
padding-top: 50px;
}
li {
background-color: purple;
border-radius: 50%;
width: 50px;
height: 50px;
padding: 1em;
text-align: center;
list-style: none;
display: inline-block;
line-height: 50px;
border: 5px solid red;
margin-right: -1em;
z-index: 0;
transition: transform 0.5s, background-color 1s;
}
li:hover {
display: inline-block;
position: relative;
transform: scale(1.5);
z-index: 10;
background-color: green;
}
<div class="menu">
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</div>
推荐阅读
- java - 使用自定义分隔符将数字格式化为字符串?
- .net - 如何在 Azure Function v1 (.NET Framework) 中使用 Azure 应用配置服务
- matlab - 多项式求值
- python - 如何在 matplotlib 3D 曲面图上突出显示切片?
- django - 如何在运行时设置 Django 模型选项?
- linux - 如何显示多个文件的第三行
- javascript - 如何在 Flask 后端处理大量 JSON 数据输出
- ionic-framework - 如何在 ionic 4 中嵌套列表而不让它看起来一团糟?
- python - 上传图像时出现“CORS 请求未成功”且 Flask 引发错误(仅限 Firefox)
- perl - 在 Perl 中比较三个文件