久久精品国产精品国产精品污,亚洲色成人四虎在线观看,亚洲熟妇无码另类久久久,揉她小豆豆揉到失禁H

  • <acronym id="1hxtt"><label id="1hxtt"></label></acronym>
    <pre id="1hxtt"></pre>
    <pre id="1hxtt"><ruby id="1hxtt"></ruby></pre>

    1. 技術頻道導航
      HTML/CSS
      .NET技術
      IIS技術
      PHP技術
      Js/JQuery
      Photoshop
      Fireworks
      服務器技術
      操作系統
      網站運營

      贊助商

      分類目錄

      贊助商

      最新文章

      搜索

      CSS+JS: 提交按鈕點擊后變為執行中動畫,完成后再變成提交按鈕

      作者:admin    時間:2022-9-12 11:14:18    瀏覽:

      在網頁交互中經??匆娺@樣的效果,就是點擊提交按鈕后,提交按鈕變為執行中動畫,當執行完成,再變為提交按鈕。這樣設計的好處是讓用戶清楚知道執行動作正在進行中,請等待一會。

      demodownload

      本文將通過CSS+JS來實現這一效果。

      實現代碼

      HTML

      <button class="btn" type="button">
      <span class="btn__text">Submit</span>
      <svg class="btn__progress" viewBox="0 0 48 48" width="48px" height="48px">
      <circle class="btn__progress-track" r="20" cx="24" cy="24" fill="none" stroke="#c7cad1" stroke-width="8" />
      <circle class="btn__progress-fill" r="20" cx="24" cy="24" fill="none" stroke="#000000" stroke-width="8" transform="rotate(-90,24,24)" stroke-dasharray="125.66 125.66" stroke-dashoffset="125.66" />
      <polyline class="btn__progress-check" points="12,24 20,32 36,16" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="34 34" stroke-dashoffset="34" />
      </svg>
      </button>

      CSS

      * {
        border: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      :root {
        --hue: 223;
        --bg1: hsl(var(--hue),10%,90%);
        --bg2: hsl(var(--hue),10%,80%);
        --fg1: hsl(var(--hue),10%,10%);
        --fg2: hsl(var(--hue),10%,20%);
        --primary1: hsl(var(--hue),90%,55%);
        --primary2: hsl(var(--hue),90%,45%);
        font-size: calc(20px + (40 - 20) * (100vw - 320px) / (1280 - 320));
      }

      body, button {
        font: 1em/1.5 Nunito, sans-serif;
      }

      body {
        background-color: var(--bg1);
        color: var(--fg1);
        height: 100vh;
        display: grid;
        place-items: center;
      }

      /* Main button styles */
      .btn {
        background-color: transparent;
        border-radius: 1.5em;
        display: block;
        position: relative;
        width: 7.5em;
        height: 3em;
        transition: width 0.3s ease-in-out;
      }

      .btn:not(:disabled):active {
        transform: translateY(0.1em);
      }

      .btn__text {
        background-color: var(--primary1);
        border-radius: inherit;
        color: hsl(0,0%,100%);
        display: inline-block;
        padding: 0.75em 1.5em;
        transition: background-color 0.15s linear,
      color 0.15s 0.3s ease-in-out;
        width: 100%;
      }

      .btn:not(:disabled):focus .btn__text,
      .btn:not(:disabled):hover .btn__text {
        background-color: var(--primary2);
      }

      .btn__progress {
        overflow: visible;
        position: absolute;
        top: 0;
        left: 0;
        width: 3em;
        height: 3em;
        visibility: hidden;
      }

      .btn__progress-track {
        r: 12px;
        stroke: var(--bg2);
        stroke-width: 24;
      }

      .btn__progress-fill {
        stroke: var(--primary1);
        stroke-dashoffset: 125.66;
      }

      .btn__progress-check {
        stroke: hsl(0,0%,100%);
        stroke-dashoffset: 34;
      }

      /* Both states */
      .btn--running,
      .btn--done {
        outline: none;
        pointer-events: none;
        width: 3em;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
      }

      .btn--running .btn__text,
      .btn--done .btn__text {
        color: transparent;
        transition: background-color 0.3s ease-in-out,
      visibility 0.3s steps(1);
      }

      .btn--running .btn__progress,
      .btn--done .btn__progress {
        visibility: visible;
      }

      /* Running state */
      .btn--running .btn__text {
        background-color: var(--bg2);
        visibility: hidden;
      }

      .btn--running .btn__progress {
        transition: visibility 0.3s 0.3s steps(1,start);
      }

      .btn--running .btn__progress-track {
        r: 20px;
        stroke-width: 8;
        transition: r 0.3s 0.3s ease-in-out,
      stroke-width 0.3s 0.3s ease-in-out;
      }

      .btn--running .btn__progress-fill {
        stroke-dashoffset: 0;
        transition: stroke-dashoffset 2s 0.6s linear;
      }

      /* Done state */
      .btn--done .btn__progress-track {
        stroke: var(--primary1);
        transition: r 0.3s ease-in-out,
      stroke-width 0.3s ease-in-out;
      }

      .btn--done .btn__progress-check {
        stroke-dashoffset: 0;
        transition: stroke-dashoffset 0.3s 0.3s ease-out;
      }

      /* Dark theme */
      @media (prefers-color-scheme: dark) {
        :root {
          --bg1: hsl(var(--hue),10%,10%);
          --bg2: hsl(var(--hue),10%,20%);
          --fg1: hsl(var(--hue),10%,90%);
          --fg2: hsl(var(--hue),10%,80%);
        }
      }

      JavaScript

      window.addEventListener("DOMContentLoaded", () =>
      {
        const btn = document.querySelector("button");
        var doneTimeout = null,
          resetTimeout = null;
        if (btn)
        {
          btn.addEventListener("click", function()
          {
            const runClass = "btn--running";
            const doneClass = "btn--done";
            // `.btn--running .btn__progress-fill` `stroke-dashoffset` duration in ms
            const submitDuration = 2000;
            const resetDuration = 1500;
            // fake the submission
            this.disabled = true;
            this.classList.add(runClass);
            clearTimeout(doneTimeout);
            clearTimeout(resetTimeout);
            doneTimeout = setTimeout(() =>
            {
              this.classList.remove(runClass);
              this.classList.add(doneClass);
              // reset the button
              resetTimeout = setTimeout(() =>
              {
                this.disabled = false;
                this.classList.remove(doneClass);
              }, resetDuration);
            }, 600 + submitDuration);
          });
        }
      });

      相關文章

      標簽: 提交按鈕  按鈕  
      x
      • 站長推薦
      久久精品国产精品国产精品污,亚洲色成人四虎在线观看,亚洲熟妇无码另类久久久,揉她小豆豆揉到失禁H