实现 css中心向两边扩散的两个核心
- 1.hover 之前的 垂直居中
- 2.文字置于最顶层
顺道来讲讲hover
伪元素是不支持 hover 的,不过我们可以给普通的 tag 标签添加 hover 以此来支持伪元素的 hover,例如 .div2:hover::before
顺道抬一手absolute
absolute有悬浮在元素上层的作用。
实现一
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;
}
.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?
等待未来更好的办法
那么我们来想想办法,不让文字被遮挡,或者说 -- 文字置顶。