Hoe te maken: menu-icoon

Hoe een menu-icoon te maken

Eerste stap - Voeg HTML toe:

<div></div>
<div></div>
<div></div>

Tweede stap - Voeg CSS toe:

div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

Probeer het zelf

Voorbeeld uitleg:

width en height Eigenschappen specificeren de breedte en hoogte van elke lijn.

We hebben een zwarte achtergrondkleur en boven- en ondermarges toegevoegd om de afstand tussen elke lijn te creëren.

Animatie pictogram

Gebruik CSS en JavaScript om het menu pictogram te wijzigen naar een 'annuleren/verwijderen' pictogram wanneer het wordt geklikt:

Eerste stap - Voeg HTML toe:

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

Tweede stap - Voeg CSS toe:

.container {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
/* Draai de eerste bar */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* Vervaag de tweede bar */
.change .bar2 {opacity: 0;}
/* Draai de laatste bar */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

Derde stap - Voeg JavaScript toe:

function myFunction(x) {
  x.classList.toggle("change");
}

Probeer het zelf

Voorbeeld uitleg:

HTML en CSS: we gebruiken dezelfde stijlen als eerder, maar这次 we hebben een container element om elke <div> element heen gewikkeld en een klasse naam toegewezen aan elk element.

Het container element wordt gebruikt om een wijzerpunt te tonen wanneer de gebruiker de muis over de divs (lijnen) houdt. Wanneer het wordt geklikt, voert het een JavaScript-functie uit die een nieuwe klasse toevoegt, wat de stijl van elke horizontale lijn wijzigt: de eerste en laatste lijn worden gevormd en gedraaid in het letter 'x'. De middelste lijnen worden geleidelijk uitgebleekt en onzichtbaar.