SegmentFault 技術週刊 Vol.38 - 神奇的 CSS

時間 2019-11-06

標籤 segmentfault 技術週刊 vol.38 vol 神奇 css 欄目 CSS 简体版

原文原文鏈接

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

「層疊」即表示容許以多種方式來描述樣式，一個 HTML 元素能夠被渲染呈現出多種樣式。html

下面就讓咱們來看看 CSS 能夠有多神奇吧。css3

CSS 基礎特性

在開始以前，咱們先來了解一下 CSS 的歷史。web

CSS簡史（譯）小程序

html和css是那麼密不可分，以致於你可能會以爲它們是一塊兒出現的。實際上，自1989年Tim Berners Lie發明互聯網後的多年中，這個世界上都不存在一個名爲css的事物，web的原始版本根本就沒有提供一種裝飾網頁的方法。segmentfault

你不知道的CSS微信小程序

這篇文章整理了一些實用的CSS技巧，來解決咱們在實際項目開發中遇到的的問題。每一個技巧將結合demo或者圖示來講明。也許你此刻正在發愁的一個bug能夠在這裏找到答案?。瀏覽器

css三角形繪製方法總結微信

在作UI（頁面重構）的時候，免不了和各類小圖標打交道，這其中最多的應該是三角形以及箭頭，通常狀況下能夠經過僞類使用unicode解決大部分問題。ide

如今咱們來總結下幾種使用css繪製三角形的方法。

奇妙的 CSS shapes(CSS圖形)

CSS 發展到今天已經愈來愈強大了。其語法的突飛猛進，讓不少之前完成不了的事情，如今能夠很是輕鬆的作到。今天就向你們介紹幾個比較新的強大的 CSS 功能：

clip-path

shape-outside

動起來

CSS3熱身實戰--過渡與動畫（實現炫酷下拉，手風琴，無縫滾動）

css3，給個人感受就是，不難，可是很難玩轉自如。今天，就用css3來實現三個特效，但願這三個特殊能讓你們受到啓發，利用css3作出更好，更炫的動畫效果，而且對比這三個特效和JS特效的對比，但願能幫助到是你們學到CSS3的一些知識。

CSS3 過渡

CSS 過渡（ transition ）用來控制 CSS 屬性的變化速率。可讓屬性的變化過程持續一段時間，而不是當即生效。好比，將元素的顏色從白色改成黑色，一般這個改變是當即生效的，使用 transition 後，將按一個曲線速率變化。這個過程能夠自定義。

如何只用 CSS 完成漂亮的加載

只想說, 本文最重要的是對 CSS, 僞元素, keyframe的分享, 以及讀者對這些東西的真正掌握, 我並非慫恿你們在每個頁面的前面都去加一個酷炫的加載

純 CSS 實現波浪效果！

原理十分簡單，咱們都知道，一個正方形，給它添加 border-radius: 50%，將會獲得一個圓形。

咱們讓上面這個圖形滾動起來(rotate)

【小程序可用】CSS3 animation 實現的跑馬燈

微信小程序如今實際上仍是用的webview，裏面搞動畫效率最高的莫過於使用CSS3的animation了。

CSS 黑科技

新手玩CSS中的一些黑科技

鼠標移進網頁裏，不見了

簡單的文字模糊效果

多重邊框

實時編輯CSS

CSS中簡單運算

border-radius

outline-offset

最後獻上一同事實習前的大白demo

黑科技：CSS定製多行省略

當字數多到必定程度就顯示省略號點點點。最初只是簡單的點點點，以後花樣愈來愈多，點點點加下箭頭，點點點加更多，點點點加更多加箭頭...。多行省略就是大段文字後面的花式點點點。

CSS五種方式實現Footer置底

頁腳置底（Sticky footer）就是讓網頁的footer部分始終在瀏覽器窗口的底部。

當網頁內容足夠長以致超出瀏覽器可視高度時，頁腳會隨着內容被推到網頁底部；但若是網頁內容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。

純CSS實現網站經常使用的五角星評分和分數展現交互效果

最近作的一個項目涉及到評分和展現分數的模塊，UI設計師也給了幾個切好的圖片，實現五角星評分方式不少，本質愛折騰的精神和對性能追求以及便於維護的考慮，蒐集和嘗試了不少方式，最終採用了純css驅動的實現方式完成評分和展現分數的功能，沒有js,也就意味着沒判斷邏輯，代碼出錯的概率更少，也更便於維護，在此，把這個功能的實現的過程記錄和分享一下，一塊兒學習交流。