时间戳

首页 > 解决方案 > 在 CSS 中为菜单图标制作自定义形状

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

问题描述

我有一个网站的 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 的正方形网格，我想在悬停时从正方形的中间展开。我应该用四个独立的正方形创建一个正方形还是继续我的方法。

提前致谢。

标签： csscss-transformsshapes

解决方案

您的代码工作正常。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>

推荐阅读