CSS（⼗⼆）.transition的应⽤之CSS中⼼扩散
实现 css中⼼向两边扩散的两个核⼼
1.hover 之前的垂直居中
2.⽂字置于最顶层
顺道来讲讲hover
伪元素是不⽀持 hover 的，不过我们可以给普通的 tag 标签添加 hover 以此来⽀持伪元素的 hover，例如 .div2:hover::before 顺道抬⼀⼿absolute
absolute有悬浮在元素上层的作⽤。
实现⼀
css
.wrap {
position: relative;
display: flex;
align-items: center;css实现垂直水平居中
justify-content: center;
width: 200px;
height: 60px;
background-color: #6B7C7A;
border-radius: 10px;
color: #fff;
cursor: pointer;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 60px;
transition: all .8s;
}
.wrap:hover .box {
width: 200px;
border-radius: 10px;
background-color: #000;
transition: width .8s;
}
html
<div class="wrap">
兄弟元素是⼀个div
<div class="box"></div>
</div>
概述
⼀个尚未成型的功能。
通过 flex 的⽅式将⽂字居中。
内嵌了⼀个空的 div 元素，并且设置为 absolute 使其不影响毗邻的⽂字。
待解决
也许我们能够通过伪元素来改进使得不需要多嵌⼊那⼀个 div。
同时，⽂字的上排显⽰也是我们需要解决的⼀个问题。
实现⼆
根据上⾯，A.我们可以利⽤伪元素来改进多余的那个 div
B. 同时，我们通过对⽂字使⽤ absolute 来解决⽂字没有置顶的问题。
这⾥主要要注意的是伪元素没有 content 是不会出现的
css
.wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 60px;
background-color: #6B7C7A;
border-radius: 10px;
color: #fff;
cursor: pointer;
}
.wrap:before {
content: '';
width: 0;
height: 60px;
transition: all .8s;
}
.wrap:hover::before {
width: 200px;
border-radius: 10px;
background-color: #000;
transition: width .8s;
}
.
box {
position: absolute;
}
html
<div class="wrap">
<div class="box">现在⽂字出现在了内框</div>
</div>
概述
基本上实现了我们所需要的功能。双层结构。其实删除了多余的代码之后，这种实现已经⾮常不错了。
待解决
⽂字置顶的⽅法或许可以改进 ? 不⼀定让其为 absolute？
等待未来更好的办法
那么我们来想想办法，不让⽂字被遮挡，或者说 -- ⽂字置顶。
⽗级的 absolute 主要是两个作⽤，⼀个是怕影响到⽂字，⼆是居中。A.其实，直接设置⽂字为 absolute 即可(孤掌难鸣)。 B.其实 flex 的布局⽅式已经实现了居中。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。