CSS 實用技巧記錄

---

/* 顯示隱藏*/
/* bad~bad~bad~ */

input:not(:focus) + .popTips{
    display: none;
}

input:focus + .popTips{
    display: block;
}

/* good~good~good~ */

input:not(:focus) + .popTips{
    transform: scale(0);
    transition: transform .25s cubic-bezier(.25, .1, .25, .1);
}

input:focus + .popTips{
    transform: scale(1);
    transition: transform .4s cubic-bezier(.29, .15, .5, 1.46);
}
複製代碼

---

/* 模擬邊框效果 */
    box-shadow: 0 0 0 1px #2ac661; 
    box-shadow: 0 0 0 10px #E8E2D6, 0 0 0 20px #E1D9C9,
    
    /* good~good~good~ */
    border: 5px solid #B4A078;
    outline: #B4A078 dashed 1px;
    outline-offset: -10px;
複製代碼

---

/* 進度條 */
<style>
  main {
    width: 100%;
    padding: 80px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; 
  }
  .progress-outer {
    width: 60%; height: 12px;
    border-radius: 8px;
    overflow: hidden;
    position: relative; 
  }    
  .progress-enter {  
    height: inherit;
    background: rgba(180, 160, 120, .2); 
  }
  .progress-bg {
    width: 60%; height: inherit;
    border-radius: 6px; 
    background: repeating-linear-gradient(-45deg, #D9CFBB 25%, #C3B393 0, #C3B393 50%,
                    #D9CFBB 0, #D9CFBB 75%, #C3B393 0);
    background-size: 16px 16px;
    animation: panoramic 20s linear infinite;
  }
  @keyframes panoramic{
    to {
      background-position: 200% 0;
    }
  }
</style>
<template>
  <main>
    <div class="progress-outer">  <!--更好的擴展-->
      <div class="progress-enter">
        <div class="progress-bg"></div>
      </div>
      <!-- <span>60%</span> -->
    </div>
  </main>
</template>
複製代碼