国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

<p>Ich versuche, jedes Mal, wenn ich auf eine Schaltfl?che klicke, eine Animation zu erzielen. Auf dem Desktop funktioniert das gut, aber auf Mobilger?ten kann ich nicht den gleichen Effekt erzielen. Ich muss zuerst auf die Schaltfl?che klicken, dann auf eine andere Stelle klicken, um das CSS zu defokussieren, und dann erneut auf die Schaltfl?che klicken, um den Animationseffekt zu erhalten. </p> <p>Das Folgende ist ein Codeausschnitt. </p> <p> <pre class="brush:css;toolbar:false;">.btn_container { Farbe: #35f8ff; Position: relativ; Anzeige: Inline-Block; Textausrichtung: Mitte; Rand: 2,5rem automatisch; } .prog_btn { Texttransformation: Gro?buchstaben; Schriftgr??e: 1,3rem; Polsterung: 10px 25px; Z-Index: 3; Hintergrundfarbe: transparent; Cursor: Zeiger; übergang: 0,2 s Ease-out; Position: relativ; Rand: automatisch; } .btn_container .svgStroke { Position: absolut; Z-Index: 1; Breite: 100 %; oben: -25 %; links: 0; } .btn_container .svgStroke Pfad { Stroke-Dasharray: 100; Stroke-Dashoffset: -800; Strichst?rke: 2; übergang: alle 1er Easy-in-out; Strich: #35f8ff; } @keyframes Bindestrich { 0 % { Stroke-Dasharray: 100; Strichst?rke: 2; } 50 % { Strichst?rke: 4; Strich: #35f8ff; Filter: Schlagschatten(0px 0px 3px #e8615a) Schlagschatten(0px 0px 20px #35f8ff) Schlagschatten(0px 0px 150px #35f8ff); } 100% { Stroke-Dashoffset: 800; Strichst?rke: 2; } } .prog_btn:hover+.svgStroke path { Cursor: Zeiger; Animation: Strich 1,5 s Kubikbezier (0,25, 0,46, 0,45, 0,94); } .prog_btn:hover { Schriftgr??e: 1,2rem; } .hinzufügen { Anzeige: Inline-Block; Rand rechts: 0,75rem; H?he: 1,5rem; Breite: 1,5rem; }</pre> <pre class="brush:html;toolbar:false;"><div class="btn_container"> <div class="prog_btn"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" Stroke-width="1.5" Stroke="currentColor" class="add" > <Pfad Stroke-Linecap="round" Stroke-LineJoin = ?Runde“ d="M12 4,5v15m7,5-7,5h-15" ></path> </svg> </div> <svg class="svgStroke" width="222" height="65" viewBox="0 0 222 85" fill="none" xmlns="http://www.w3.org/2000/svg"> <Pfad d="M205 84H21L1 63.4941V18.5765L21 1H205L221 18.5765V63.4941L205 84Z" Strich="wei?" Strichbreite="2" ></path> </svg> </div></pre> </p> <p>Hier gibt es auch einen CodePen-Link. </p>

let touchDevice = false;
const progBtn = document.querySelector('.prog_btn');
const path = document.querySelector('.prog_btn +.svgStroke path');
path.addEventListener('animationend', function() {
  path.style.animation = '';
});
progBtn.addEventListener('touchstart', function() {
  touchDevice = true;
  path.style.animation = 'dash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
});
progBtn.addEventListener('mouseover', function() {
  path.style.animation = 'dash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
});

.btn_container {
  color: #35f8ff;
  position: relative;
  display: inline-block;
  text-align: center;
  margin: 2.5rem auto;
}

.prog_btn {
  text-transform: uppercase;
  font-size: 1.3rem;
  padding: 10px 25px;
  z-index: 3;
  background-color: transparent;
  cursor: pointer;
  transition: 0.2s ease-out;
  position: relative;
  margin: auto;
}

.btn_container .svgStroke {
  position: absolute;
  z-index: 1;
  width: 100%;
  top: -25%;
  left: 0;
}

.btn_container .svgStroke path {
  stroke-dasharray: 100;
  stroke-dashoffset: -800;
  stroke-width: 2;
  transition: all 1s ease-in-out;
  stroke: #35f8ff;
}

@keyframes dash {
  0% {
    stroke-dasharray: 100;
    stroke-width: 2;
  }
  50% {
    stroke-width: 4;
    stroke: #35f8ff;
    filter: drop-shadow(0px 0px 3px #e8615a) drop-shadow(0px 0px 20px #35f8ff) drop-shadow(0px 0px 150px #35f8ff);
  }
  100% {
    stroke-dashoffset: 800;
    stroke-width: 2;
  }
}

.prog_btn:hover+.svgStroke path {
  cursor: pointer;
}

.prog_btn:hover {
  font-size: 1.2rem;
}

.add {
  display: inline-block;
  margin-right: 0.75rem;
  height: 1.5rem;
  width: 1.5rem;
}

<div class="btn_container">
  <div class="prog_btn">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="add">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M12 4.5v15m7.5-7.5h-15"
      ></path>
    </svg> 添加 10%
  </div>
  <svg class="svgStroke" width="222" height="65" viewBox="0 0 222 85" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M205 84H21L1 63.4941V18.5765L21 1H205L221 18.5765V63.4941L205 84Z"
      stroke="white"
      stroke-width="2"
    ></path>
  </svg>
</div>