html - 如何在转换(HTML,CSS)时将文本集中在一个 div 块上,该块在整个过渡过程中保持集中?
问题描述
我有这个div
块,上面有一个“你好”。该块的设计方式是,当您将鼠标悬停在其上时,它会变形并旋转 360 度(即恢复到其原始状态但更大一些)。我希望“你好”在整个过渡和转型期间都位于街区的中心。我使用以下方法集中它:
position: relative;
top: 40px;
transition: .4s;
在p
CSS 中,但是当 div 被转换时,文本最终位于块的顶部,即不集中。我该如何实现?
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: rgb(147, 141, 223);
transition: width .6s, height .6s, transform .6s;
text-align: center;
position: relative;
}
div:hover {
width: 300px;
height: 300px;
transform: rotate(360deg);
}
p {
position: relative;
top: 40px;
transition: .6s;
}
</style>
</head>
<body>
<div>
<b><p style="font-family: Verdana, Geneva, Tahoma, sans-serif; color: white">Hello</p></b>
</div>
</body>
</html>
解决方案
问题是您使用了两个独立样式的元素,因此当您旋转 div 时,您还应该使用div:hover p
选择器调整 div 中的 p 以更改 p 的顶部。
一个更直接的解决方案是完全放弃 p 的样式,并将所有必要的样式放在div
anddiv:hover
选择器中。
不过,我会选择line-height
而不是改变位置。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: rgb(147, 141, 223);
transition: width .6s, height .6s, transform .6s;
text-align: center;
position: relative;
line-height:100px; /* new: line height the same as the height */
}
div:hover {
width: 300px;
height: 300px;
transform: rotate(360deg);
line-height:300px; /* same */
}
p {
transition: .6s;
}
</style>
</head>
<body>
<div>
<b><p style="font-family: Verdana, Geneva, Tahoma, sans-serif; color: white">Hello</p></b>
</div>
</body>
</html>
推荐阅读
- c++ - 动态分配二维数组时,为什么内存中每行有12字节的间隙
- javascript - Topojson 动画一次飞行
- bash - Bash:将两个字符串直接拆分为关联数组
- javascript - Bootstrap 模态在单击时未显示在角度 8 上
- javascript - FullCalendar 4 - 向事件对象添加/显示附加值
- sql - 如何使用 Sequelize 创建单独的关系表?
- json - 在“无名”键上使用打字稿正确打字
- angular - 如何为表单控件设置多重验证?
- leaflet - 缩放级别上不同大小的标记(L.icon)
- android - 在 Android 上 - 如何从广角相机捕获图像/视频?