SegmentFault 思否技術週刊 Vol.55 -- Amazing!CSS 也能實現炫酷特效

Beverly 發表於 2022-11-24
CSS

CSS 的全稱是 Cascading Style Sheets,即層疊樣式表, 是一種樣式表語言,用來描述 HTML 或 XML(包括如 SVG、XHTML 之類的 XML 分支語言)元素所呈現的樣式。

小編整理了思否社群關於 CSS 的優質技術文章,歡迎大家閱讀 ~

📖 文章推薦

超酷炫的轉場動畫?CSS 輕鬆拿下!

藉助強大的 CSS 以及一些有意思的技巧,我們利用純 CSS 實現了這兩個看似非常複雜的轉場動畫效果,並且,這在之前,是完全不可能使用純 CSS 實現的。

CSS color-scheme 和夜間模式

normal:表示元素未指定任何配色方案,因此應使用瀏覽器的預設配色方案呈現。
light:表示可以使用作業系統亮色配色方案渲染元素。
dark:表示可以使用作業系統深色配色方案渲染元素。

基於 CSS mask-image 實現炫酷圖片過渡效果之星球大戰

在給公司開發官網的過程中,會有涉及到一些圖片的滑鼠懸停效果,滑鼠懸停後會改變原圖,單純的漸隱漸現,放大縮小,左右平移已經滿足不了產品經理期望了,總覺得不夠驚豔,創意不夠。其實作為一個開發者,也不會滿足這普通日常的動畫互動效果,在尋找新的 idea 時發現基於 CSS mask-image 可以實現很多不錯的效果,本文將基於此屬性實現四種圖片過渡動畫效果。

動畫合成小技巧!CSS 實現動感的倒數計時效果

這是一個非常“動感”的倒數計時效果,通常在一些活動開場中比較常見,分析一下整個動畫過程,不難發現,有以下幾類動畫

  1. 數字的變化
  2. 縮小和放大
  3. 透明度變化

不知道小夥伴能否觀察出來呢?下面來一起來看看具體實現吧

使用純 CSS 實現超酷炫的粘性氣泡效果

其中,要想靈活運用 SVG 中的 feGaussianBlur 濾鏡還是需要有非常強大的 SVG 知識儲備的。那麼,僅僅使用 CSS 能否實現該效果呢?
嘿嘿,強大的 CSS 當然是可以的。本文,就將帶領大家一步步使用純 CSS,完成上述效果。

使用 CSS background實現炫酷懸停效果

日常開發過程中,會遇到不少按鈕滑鼠懸停的效果,實現這類懸停效果的方式有很多,藉助偽元素,CSS3 變換及過渡等都可以實現。今天的文章將使用背景色實現類似的效果,當我們遇到一個問題時,你的腦海中的方案不止一種時,我想這肯定是極好的,使用不同的方法達到同一的效果,或者某天所遇到的問題就迎刃而解了。

CSS 如何把元素固定在容器底部?(四種方式)

如果是頁面底部,我們可以直接 position: fixed;bottom: 0; 基於瀏覽器定位直接實現。
但是他要的效果是基於父級容器,那麼我們必須要使用其他手段來定位了
relative 來限制 absolute,然後 bottom: 0,但是在內容過長的時候會導致顯示異常。所以我們需要做內部滾動。
如果做內部滾動,那麼我們只要可以撐開盒子即可。不需要絕對定位了

📖 問答推薦

👇課程推薦

《簡明 CSS 教程》
課程連結:https://ke.segmentfault.com/c...

課程收穫
  1. CSS 作為 Web 前端開發中必備的技能之一,由於其知識點多,內容雜,使用起來又非常的靈活,如果沒有經過系統地學習,非常容易產生挫敗感。本系列課程依據講師自身的經驗,系統地編排了 CSS 當中的知識點,由淺入深,從基礎到複雜,從理論到實踐,手把手地介紹 CSS 當中最核心的知識點。
  2. 在實際的工作中,異常靈活的 CSS 會給團隊開發帶來不必要的麻煩。本系列課程除了介紹知識點之外,更注重實際工作的意義,讓同學們不僅能夠掌握 CSS 的知識,更能掌握實際工作中應該注意的點,讓理論和實際得以結合,無縫銜接學習和工作。

PS:大家想看哪些方面的技術內容,可以在評論區留言喔 ~

如有問題可以新增小姐姐微信~

image.png