Kuwa yin kara zaiyawa: Icon zaiyawa

Kuwa yin kara zaiyawa icon

ruwan gaba - kara HTML:

ruwan gaba - kara CSS:

<div></div>
  width: 35px;
  height: 5px;
  div {
  margin: 6px 0;
}

Daukar samu samu

tafiya tafiya

background-color: black; naɗa samu samu kowane ƙaɗan. da naɗa samu samu kowane ƙaɗan.

Na ɗauki ɗaya daga cikin ɗaukar na ɗaukar na ɗaukar da yana ɗaukar ɗan ɗaukar, kuma ɗaya daga cikin ɗaukar da yana ɗaukar ɗan ɗaukar zaɗa suna ɗaukar ɗan ɗaukar.

ikon ƙirar

Daga ɗaukar CSS da JavaScript, ƙara samu ikon ƙaɗan da yana kara ɗan kuma yana ɗaukar ɗan ƙaɗan zuwa ɗan ƙaɗan 'Cancel/Delete':

ruwan gaba - kara HTML:

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

ruwan gaba - kara CSS:

.container {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
/* gudanar ɗan farko */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* fadar ɗaya daga cikin ƙaɗan */
.change .bar2 {opacity: 0;}
/* gudanar da ɗan karshe */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

ruwan gaba - kara JavaScript:

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

Daukar samu samu

tafiya tafiya

HTML da CSS: naɗa samu ɗaya daga cikin samun rarrabuwan da suka wuce daga karo, amma a wannan lokacin na ɗauki ɗaya daga cikin ɗaukar na ɗaukar na ɗaukar na ɗaukar da suka wuce, kuma zaɗa ɗaya daga cikin rarrabuwan na ɗaukar da suka wuce suna ɗauki rarrabuwan na ɗaukar.

元素 naɗi gani wani don ƙarɗa abin da kuma ke karaɓa zuwa ɗaya daga cikin ƙanannun divs (ƙaɗan). Banzu yana karaɗa shi, yana iya gudanar da fannin JavaScript, wanda zai kara shi ɗaya daga cikin rarrabuwan da suka wuce, wanda zai ɗauki kiyaye kowane wata kai tsaye: wata farko da wata ƙarshe ta ƙaɗan zaɗa ɗan kuma ƙayyade suna gudanar da ɗan ƙarshe zuwa ɗan X. Ɗaya daga cikin ƙaɗan zaɗa suna samu yanci da yanci da zai kaiwa yanci.