Создание пользовательской формы в CSS для значка меню

Question 1

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

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

css css-transforms shapes

0

Ozzy Gonzalez 30 Окт 2019 в 06:05

Answer

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

1

thetont 6 Ноя 2019 в 05:43

Элементы .square:hover .square:before и .square:hover .square:after совершенно не нужны и бессмысленны для этой разметки.

–

thetont

30 Окт 2019 в 13:59

Question 2

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

1

thetont 6 Ноя 2019 в 05:43

Элементы .square:hover .square:before и .square:hover .square:after совершенно не нужны и бессмысленны для этой разметки.

–

thetont

30 Окт 2019 в 13:59

Создание пользовательской формы в CSS для значка меню

1 ответ

Похожие вопросы

Новые вопросы

css