Hoe OM - Kieslys-ikoon
Leer hoe om 'n kieslys-ikoon met CSS te skep.
Hoe om 'n spyskaart-ikoon te skep
As jy nie 'n ikoonbiblioteek gebruik nie, kan jy 'n basiese kieslys-ikoon met CSS skep:
Kieslys-ikoon:
Geanimeerde spyskaart-ikoon (klik daarop):
Stap 1) Voeg HTML by:
Voorbeeld
<div></div>
<div></div>
<div></div>
Stap 2) Voeg CSS by:
Voorbeeld
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Voorbeeld Verduidelik
Die width
en die height
eiendom spesifiseer die breedte en hoogte van elke staaf.
Ons het 'n swart bygevoeg background-color
, en die bo- en onderkant margin
word gebruik om 'n afstand tussen elke staaf te skep.
Geanimeerde ikoon
Gebruik CSS en JavaScript om die kieslys-ikoon na 'n "kanselleer/verwyder"-ikoon te verander wanneer daarop geklik word:
Stap 1) Voeg HTML by:
Voorbeeld
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>
Stap 2) Voeg CSS by:
Voorbeeld
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate
first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the
second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform:
rotate(45deg) translate(-8px, -8px) ;
transform:
rotate(45deg) translate(-8px, -8px) ;
}
Stap 3) Voeg JavaScript by:
Voorbeeld
function myFunction(x) {
x.classList.toggle("change");
}
Voorbeeld Verduidelik
HTML & CSS: Ons gebruik dieselfde style as voorheen, net hierdie keer draai ons 'n houerelement om elke <div>-element en ons spesifiseer 'n klasnaam vir elkeen.
Die houerelement word gebruik om 'n wysersimbool te wys wanneer die gebruiker die muis oor die divs (stawe) beweeg. Wanneer daarop geklik word, sal dit 'n JavaScript-funksie uitvoer wat 'n nuwe klasnaam daarby voeg, wat die style van elke horisontale balk sal verander: die eerste en die laaste balk word getransformeer en geroteer na die letter "x". Die balk in die middel vervaag en word onsigbaar.