Создайте собственную форму в CSS для иконки меню - PullRequest
Новая
       40

Создайте собственную форму в CSS для иконки меню

0 голосов
/ 30 октября 2019

У меня есть значок 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, которую я хочу расширить из середины поля. квадрат при наведении. Должен ли я создать квадрат с четырьмя отдельными квадратами или продолжить свой подход до сих пор.

Заранее спасибо.

1 Ответ

1 голос
/ 30 октября 2019

Ваш код работает правильно. Если вы хотите парить, и он будет расширяться от середины квадрата, не используйте 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>
...