二次元的CSS 純CSS3做的能換擋的電扇

這次分享的電扇，和以往用css3畫人物相比 多加了一點互動，就是電扇開關的地方，用到了一點點css3的 :checked +div 這個很少用到的選擇器來實現的。

github傳送門：

小技巧就是，一開始就寫了一組單選按鈕來做開關的部分。把單選按鈕的透明度設為0，然後在後面疊加乙個div來畫開關的樣式。

012

3css3 fan

.switch

.switch_0}}
}.switch_1}}
}.switch_2}}
}.switch_3}}
}

有個地方需要優化，就是在換擋的時候，動畫應該柔和些。有同學想到用什麼辦法優化下嗎？

二次元的正確開啟方式

本文 github 已收錄，有技術乾貨文章，整理的學習資料，一線大廠面試經驗分享等，歡迎 star 和 完善。去年發表的 talking head 大家都看過了吧？最近，這位谷歌工程師對演算法進行了公升級，talking head 2 效果更好！只需要一張 png 二次元角色，就可以生成虛擬偶像，生...

純CSS3實現的標籤效果

1.效果分析 純css3實現的標籤效果，如圖1所示，看看demo。該標籤主要有三個部分組成，左側的三角形 右側的圓角矩形和文字前面的小圓點。重點在左側三角形和文字前面圓點的實現。2.技術難點 三角形利用寬和高為零的元素的邊框實現。將邊框設定為12px solid transparent，然後將右側邊...

純CSS3實現的標籤效果

1.效果分析 純css3實現的標籤效果，如圖1所示，看看demo。該標籤主要有三個部分組成，左側的三角形 右側的圓角矩形和文字前面的小圓點。重點在左側三角形和文字前面圓點的實現。2.技術難點 三角形利用寬和高為零的元素的邊框實現。將邊框設定為12px solid transparent，然後將右側邊...