文章

[純css] bootstrap5 Dropdown 下拉選單加上動畫

,

bootstrap中的dropdown menu顯示或隱藏，是使用了.show這個class來控制選單的display:none; 或 display:block;，因此我們沒有辦法直接針對display去寫動畫。

閱讀更多
/0 評論/通過：

純 css 區分 hover in / out 不同動畫

,

在 codepan 上面看到一個很有趣的 hover 效果，於是想說不要看他的程式碼，自己來實作看看。

一般我們要區分滑鼠進入或是離開，會需要用到 javascript 來監聽 moseover / mouseleave ，但是如果你是簡單的效果的話，不妨可以用 css 實作看看。

重點在於使用不同的 transition 條件，去阻擋某些應該要變化的屬性，hover 和沒有 hover的 css 使用不同的 transition 條件，就會看起來很像不同的動畫。

閱讀更多
/0 評論/通過：

修改input游標的顏色

,

input要修改打字時的游標顏色，大致上效果長這樣子：

閱讀更多
/0 評論/通過：

裁切照片

,

不用放背景圖，直接針對<img />裁切圖片

img{
   width: 100%;
   height: 66rem;
   object-fit: cover;
   object-position: 50% 50%;
}
/0 評論/通過：

多邊形

,

單純用css改變element形狀，支援多邊形、內凹

-webkit-clip-path:polygon(10% 100% ,0 100%,0 0, 100% 0%, 100% 10%, 10% 10%);
閱讀更多
/0 評論/通過：

自適應計算n欄的寬度

,

網頁想要排版成n欄一排

<div class="grid">
  <div class="grid__item"></div>
</div>
.grid {
  display: flex;
  flex-wrap: wrap;
    &__item {
      margin-bottom: $gutter;
      width: calc((100% - 2 * #{$gutter}) / 3);
      &:not(:nth-child(3n)) {
        margin-right: $gutter;
      }
  }
}
/0 評論/通過：