CSS，十二.transition的应用之CSS中心扩散

2023-08-17 23:37•css•阅读 3061

实现 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？

等待未来更好的办法

那么我们来想想办法，不让文字被遮挡，或者说 -- 文字置顶。

父级的 absolute 主要是两个作用，一个是怕影响到文字，二是居中。A.其实，直接设置文字为 absolute 即可(孤掌难鸣)。 B.其实 flex 的布局方式已经实现了居中。