文章

如何把 sass 的 mixin 和 if 改寫成 less

antd 使用的 css 預編是 less,之前在其他專案都是寫 scss,想要把之前寫的工具例如響應式的 mixin 等等搬過來用,這樣就必須改寫成 less 的寫法。

閱讀更多

[純css動畫] 波浪

憂鬱的星期一,來拍個片好ㄌ~

最近好像很流行這種動態的背景,真心純css不騙,然後沒有svg 不怕不怕:

youtube:點這裡查看

codepan:點這裡查看

閱讀更多

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

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

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

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

閱讀更多

使用vite後,scss import路徑改寫

如題,vite需要用到的是絕對路徑,所以原本在vue cli那樣的寫法已經會找不到檔案了。

閱讀更多

多邊形

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

-webkit-clip-path:polygon(10% 100% ,0 100%,0 0, 100% 0%, 100% 10%, 10% 10%);
閱讀更多

自適應計算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;
      }
  }
}