Saya memiliki ikon svg untuk situs web yang ingin saya buat menjadi bentuk css sehingga saya dapat membuat efek khusus saat mengarahkan kursor.

Saya menggunakan CSS murni untuk ini dan saya tidak yakin saya mendekati masalah dengan benar.

.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

Sejauh ini saya menggunakan kotak sederhana dengan tanda silang yang dibuat menggunakan :before dan :after psuedo-selectors. Saat melayang, saya mencoba membuat kotak lebih besar dan garis lebih tebal untuk memberi kesan yang saya inginkan.

Ini pada dasarnya adalah kotak kotak 2 x 2 yang ingin saya kembangkan dari tengah kotak saat melayang. Haruskah saya membuat kotak dengan empat kotak terpisah atau melanjutkan pendekatan saya sejauh ini.

Terima kasih sebelumnya.

0
Ozzy Gonzalez 30 Oktober 2019, 06:05

1 menjawab

Jawaban Terbaik

Kode Anda berfungsi dengan benar. Jika Anda ingin mengarahkan kursor dan akan melebar dari tengah kotak, jangan gunakan translate(-50%, -50%); saat mengarahkan kursor ke kotak

.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 November 2019, 02:43