在CSS中为菜单图标创建自定义形状

Question

我有一个网站的svg图标，我想将其制作成CSS形状，以便可以对悬停做出自定义效果。

我为此使用纯CSS，但不确定我是否正确解决了该问题。

.wrapper {
   position: relative;
   height: 100vh;
}

.square {
   height: 40px;
   width: 40px;
   background-color: black;
   transition: all .2s;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

.square:before {
   content: "";
   width: 100%;
   height: 2px;
   background-color: #fff;
   display: inline-block;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }

.square:after {
   content: "";
   width: 100%;
   height: 2px;
   background-color: #fff;
   display: inline-block;
   position: absolute;
   left: 50%;
   top: 50%;
   transform-origin: 50%;
   transform: translate(-50%, -50%) rotate(90deg);
}

.square:hover {
   transform: scale(1.2) translate(-50%, -50%);
 }

 .square:hover .square:before {
   transform: scale(1.2);
 }

.square:hover .square:before, .square:hover .square:after {
   height: 4px;
}

<div class="wrapper">
  <div class="square"></div>
</div>

https://codepen.io/Portismouth/pen/ZEEXeVP

到目前为止，我正在使用一个简单的正方形，该正方形带有使用：before和：after伪选择器创建的十字。在悬停时，我试图使正方形变大，而线变粗，以给人我想要的印象。

基本上是一个2 x 2的正方形网格，我想在悬停时从正方形的中间扩展。我应该创建一个包含四个独立正方形的正方形，还是应该继续我的方法。

提前感谢。

Answer 1

您的代码正常工作。如果要悬停并且它将从正方形的中间扩展，则在悬停在正方形上时不要使用translate(-50%, -50%);

.wrapper {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.square {
   height: 40px;
   width: 40px;
   background-color: black;
   transition: all .2s;
}

.square:before {
   content: "";
   width: 100%;
   height: 2px;
   background-color: #fff;
   display: inline-block;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }

.square:after {
   content: "";
   width: 100%;
   height: 2px;
   background-color: #fff;
   display: inline-block;
   position: absolute;
   left: 50%;
   top: 50%;
   transform-origin: 50%;
   transform: translate(-50%, -50%) rotate(90deg);
}

.square:hover {
   transform: scale(2);
 }

 .square:hover .square:before {
   transform: scale(2, 1);
 }

.square:hover .square:after {
  transform: scale(1, 2);
}

<div class="wrapper">
  <div class="square"></div>
</div>