CSS 的全稱是 Cascading Style Sheets，即層疊樣式表， 是一種樣式表語言，用來描述 HTML 或 XML（包括如 SVG、XHTML 之類的 XML 分支語言）元素所呈現的樣式。
小編整理了思否社群關於 CSS 的優質技術文章，歡迎大家閱讀 ~
? 文章推薦
藉助強大的 CSS 以及一些有意思的技巧，我們利用純 CSS 實現了這兩個看似非常複雜的轉場動畫效果，並且，這在之前，是完全不可能使用純 CSS 實現的。
normal：表示元素未指定任何配色方案，因此應使用瀏覽器的預設配色方案呈現。
light：表示可以使用作業系統亮色配色方案渲染元素。
dark：表示可以使用作業系統深色配色方案渲染元素。
基於 CSS mask-image 實現炫酷圖片過渡效果之星球大戰
在給公司開發官網的過程中，會有涉及到一些圖片的滑鼠懸停效果，滑鼠懸停後會改變原圖，單純的漸隱漸現，放大縮小，左右平移已經滿足不了產品經理期望了，總覺得不夠驚豔，創意不夠。其實作為一個開發者，也不會滿足這普通日常的動畫互動效果，在尋找新的 idea 時發現基於 CSS mask-image 可以實現很多不錯的效果，本文將基於此屬性實現四種圖片過渡動畫效果。
這是一個非常“動感”的倒數計時效果，通常在一些活動開場中比較常見，分析一下整個動畫過程，不難發現，有以下幾類動畫
- 數字的變化
- 縮小和放大
- 透明度變化
不知道小夥伴能否觀察出來呢？下面來一起來看看具體實現吧
其中，要想靈活運用 SVG 中的 feGaussianBlur 濾鏡還是需要有非常強大的 SVG 知識儲備的。那麼，僅僅使用 CSS 能否實現該效果呢？
嘿嘿，強大的 CSS 當然是可以的。本文，就將帶領大家一步步使用純 CSS，完成上述效果。
日常開發過程中，會遇到不少按鈕滑鼠懸停的效果，實現這類懸停效果的方式有很多，藉助偽元素，CSS3 變換及過渡等都可以實現。今天的文章將使用背景色實現類似的效果，當我們遇到一個問題時，你的腦海中的方案不止一種時，我想這肯定是極好的，使用不同的方法達到同一的效果，或者某天所遇到的問題就迎刃而解了。
如果是頁面底部，我們可以直接 position: fixed;bottom: 0; 基於瀏覽器定位直接實現。
但是他要的效果是基於父級容器，那麼我們必須要使用其他手段來定位了
relative 來限制 absolute，然後 bottom: 0，但是在內容過長的時候會導致顯示異常。所以我們需要做內部滾動。
如果做內部滾動，那麼我們只要可以撐開盒子即可。不需要絕對定位了
? 問答推薦
- CSS 一個樣式問題，底部多出一塊白色的區域？
- 超出隱藏使用了 -webkit-line-clamp: 2; 為什麼第三行也展示出了一部分？
- 【CSS】如何實現圓弧形狀的切角？
- 請問這樣的數字應該怎麼用 CSS 來寫呢？
- CSS 怎麼實現兩個 div 一個固定寬另一個填充剩餘空間？
- CSS 如何實現動態 loading 效果？
- CSS 計算寬度問題
- CSS 多行文字，如何實現距離可調的下劃線？
- 請問大家關於一個 CSS 節點選擇器的問題
- CSS 命名規範
?課程推薦
《簡明 CSS 教程》
課程連結：https://ke.segmentfault.com/c...
課程收穫
- CSS 作為 Web 前端開發中必備的技能之一，由於其知識點多，內容雜，使用起來又非常的靈活，如果沒有經過系統地學習，非常容易產生挫敗感。本系列課程依據講師自身的經驗，系統地編排了 CSS 當中的知識點，由淺入深，從基礎到複雜，從理論到實踐，手把手地介紹 CSS 當中最核心的知識點。
- 在實際的工作中，異常靈活的 CSS 會給團隊開發帶來不必要的麻煩。本系列課程除了介紹知識點之外，更注重實際工作的意義，讓同學們不僅能夠掌握 CSS 的知識，更能掌握實際工作中應該注意的點，讓理論和實際得以結合，無縫銜接學習和工作。
PS：大家想看哪些方面的技術內容，可以在評論區留言喔 ~
如有問題可以新增小姐姐微信~
