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

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

閱讀更多
0

[純css動畫] 波浪

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

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

youtube:點這裡查看

codepan:點這裡查看

閱讀更多
0

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

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

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

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

閱讀更多
0

[不安裝套件] 製作響應式 RWD 輪播效果 Slider

如題,我個人並不是很排斥安裝 javascript 套件,因為畢竟人家花心思做出來的東西就是會想得比較全面,可是有時候我們就是用不到這麼多功能,所以可以自己動手做的就試著做做看吧!

閱讀更多
0

修改input游標的顏色

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

閱讀更多
0

React實作上傳檔案預覽圖片

這是我想要實現的樣子:在一個卡片中點擊上傳檔案,上傳後的照片不能超出我設定的框框,太高就左右留白,太長就上下留白。

閱讀更多
0

線條背景

用漸層的方式繪製重複排列的線條背景

background: repeating-linear-gradient(
    45deg,
    rgba($color-white, 0) 25%,
    rgba($color-white, 0) 60%,
    #fff 75%,
    rgba($color-white, 0) 0
);
background-color: rgba($color-white, 0.3);
background-size: 12px 12px;
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