在 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);
 }

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

在 CSS 中为菜单图标制作自定义形状

Make a custom shape in CSS for menu icon

css

shapes

css-transforms