歷時4個多月，學習了這 66 個CSS 特效

66 個特效，是我歷時4個多月在油管一個一個跟著敲出來的，為了加強記憶，每個練習，我都錄制了視頻，在這里分享出來給大家。大家可能又會調侃了，你是工作不飽和吧，有時間做這些。其實，我目前工作還是挺飽和的，都是擠出來的。我們是9點上班，我基本7點半就到公司自學了，這樣我就有一個半小時的時間來做這些了。

對于 CSS 評價，無論是在論壇還是身邊的人，我聽到最多的是學 CSS 這些花里胡哨沒啥用，實際項目中又用不到。聽到這些心里還是挺實受挫的，有時候會懷疑自己，我學習的方向是不是錯了。但在幾次的項目需要用到一些特效，我都能很快的找到思路并做出來，我想這是得益于，我平時所學的這些特效積累出來的。

現在我不在困惑我所學的東西，因為學習成長是你自己事情，而不是別人在意的眼光。

這個系列我會一直學習下去，第一季 66 節課，已經更完畢，所有的源碼都在下面的地址：

https://blog.csdn.net/qq449245884/category_9873715.html

01.波浪文本動畫

效果

圖片描述

視頻地址1：https://www.ixigua.com/i6807702906041532939/

視頻地址2：https://www.bilibili.com/video/BV1Y7411m7b6

02.漣漪動畫

效果

圖片描述

視頻地址一：https://www.ixigua.com/i6807982622866670083/

視頻地址一：https://www.bilibili.com/video/BV1V741117Gm/

03.視頻字幕懸停特效

效果

圖片描述

視頻地址一：https://www.bilibili.com/video/BV1f7411Q7JD/視頻地址二：https://www.ixigua.com/i6809102422514860548/

04-新擬物單選按鈕效果

效果

圖片描述

視頻地址一：https://www.ixigua.com/i6809529914975322632/

視頻地址二：https://www.bilibili.com/video/BV1Q7411D7LH/

05-全屏視頻背景滾動淡出

效果

圖片描述

視頻地址一：https://www.bilibili.com/video/BV1nC4y1s7Dw/

視頻地址二：https://www.ixigua.com/i6809937347405152781/

06-創意產品卡

效果

圖片描述

視頻地址一：https://mp.toutiao.com/profile_v3/xigua/content-manage

視頻地址二：https://www.bilibili.com/video/BV1mt4y1m7Nw/

07.創意菜單項懸停特效

效果

圖片描述

視頻地址一：https://www.bilibili.com/video/BV1za4y1t73c/

視頻地址二：https://www.ixigua.com/i6812147372131353091/

08.怎么配合視頻做好 CSS 特效

效果

圖片描述

視頻地址一：https://www.ixigua.com/i6812840842902897164/

視頻地址二：https://www.bilibili.com/video/BV1Le41147w9/

09.制作有個性的滾動條

圖片描述

視頻地址一：https://www.bilibili.com/video/BV17e41147Gr/

視頻地址二：https://www.ixigua.com/i6813181916829712908/

10.BoxShadow 初級到高級特效

效果

圖片描述

視頻地址一：https://www.bilibili.com/video/BV1YC4y1s7kG/

視頻地址一：https://www.ixigua.com/i6814296955070448135/

11.僅使用CSS對任何SVG圖標進行動畫處理

效果

圖片描述

視頻地址一：https://www.bilibili.com/video/BV1AA411b7tA/

視頻地址二：https://www.ixigua.com/i6814028560034955780/

12.使用 CSS3 實現響應式推薦卡片

效果

圖片描述

視頻地址一：https://www.bilibili.com/video/BV1YC4y1s7kG/

視頻地址一：https://www.ixigua.com/i6814703631879635467/

13.新擬物炫酷時鐘

效果

圖片描述

視頻地址一：https://www.bilibili.com/video/BV1pQ4y1K76g/

視頻地址一：https://www.ixigua.com/i6815132991329665539/

14.使用 CSS Grid 實現瀑布流布局

效果

圖片描述

視頻地址一：https://www.ixigua.com/i6815506102424175116/

15.2.5D視差效應

clipboard.png

視頻地址一：https://www.bilibili.com/video/BV1mT4y1G7cY/

視頻地址二：https://www.ixigua.com/i6815871539683000835/

16.純CSS3水波動畫特效

效果

圖片描述

視頻地址：https://www.ixigua.com/i6816244424448672260/

17.圓形進度條

效果

圖片描述

視頻地址一：https://www.bilibili.com/video/BV1qp4y1X7Jz/

視頻地址二：https://www.ixigua.com/i6816614062399422980/

18.3D透視圖與分層圖像懸停效果

效果

視頻地址一：https://www.bilibili.com/video/BV1J64y1T7XV/

視頻地址二：https://www.ixigua.com/i6817737160876098056/

19.顯示隱藏密碼框

效果

視頻地址一：https://www.bilibili.com/video/BV1UQ4y1K7oz/

視頻地址二：https://www.ixigua.com/i6818096482898412036/

20.立體卡片展示特效

效果

視頻地址一：https://www.bilibili.com/video/BV1ce411s7AG/

視頻地址二：https://www.ixigua.com/i6818471295219401219/

21.按鈕懸停特效

效果

視頻地址：https://www.ixigua.com/i6818851166034592267/

22.文字肖像和鼠標移動視差效果

效果：

視頻地址一：https://www.bilibili.com/video/BV1TV411d7F6/

視頻地址二：https://www.ixigua.com/i6819215565555499532/

23.輸入框驗證特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1Ak4y1k7Dm/視頻地址二：https://www.ixigua.com/i6820325547432739339/

24.粘性導航特效

效果：

視頻地址一：https://www.bilibili.com/video/BV15K411577L/

視頻地址二：https://www.ixigua.com/i6821071022444249611/

25.有趣的子彈聲特效

效果：

視頻演示地址一：https://www.bilibili.com/video/BV1C54y1Q7hd/

視頻演示地址二：https://www.ixigua.com/i6821449649967071748/

26.漸變發光卡片

效果：

視頻地址一：https://www.bilibili.com/video/BV1Qf4y1m7BY/

視頻地址二：https://www.ixigua.com/i6822923946040492556/

27.實現長陰影網頁特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1uA411t78K/

視頻地址二：https://www.ixigua.com/i6823670426938376716/

28.發光復選框特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1qz411z7Eq/視頻地址二：https://www.ixigua.com/i6824042494213227012/

29. 酷炫 Loading 特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1dK411W7De/

視頻地址二：https://www.ixigua.com/i6825524219757986318/

30.鼠標移動多彩心網頁特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1de411p7gc/

視頻地址二：https://www.ixigua.com/i6825893346527937038/

31.實現定價卡懸停特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1mK411W7pG/

視頻地址二：https://www.ixigua.com/i6826645569625129484/

32. 3D 翻轉卡片特效

效果：

視頻地址一：https://www.bilibili.com/video/BV13K4y1t7zh

視頻地址二：https://www.ixigua.com/i6827005668893917708/

33.視頻滑塊特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1Bk4y1k7QY

視頻地址二：https://www.ixigua.com/i6828124892492202500/

34.像素化圖像懸停特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1ta4y1e7WP

視頻地址二：https://www.ixigua.com/i6828497506532327939/

35.按鈕懸停效霓虹燈特效

效果：

視頻地址一：https://www.bilibili.com/video/BV11z4y1R74N

視頻地址二：https://www.ixigua.com/i6828857444907614723/

36.笑臉評分欄特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1Pt4y1y7K2/

視頻地址二：https://www.ixigua.com/i6829582434183414283/

37.鼠標移動線條特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1ag4y1i7E9/

視頻地址二：https://www.ixigua.com/i6830722031856648707/

38.鼠標移動炫酷特效

效果

視頻演示地址一：https://www.bilibili.com/video/BV1Xz411v7X9/

視頻演示地址二：https://www.ixigua.com/i6831832169350955531/

39.粘滯滾動特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1r54y1D7Tk/

視頻地址二：https://www.ixigua.com/i6832204729552994819/

40.新擬物 checkbox 特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1iV411r7SD/

視頻地址二：https://www.ixigua.com/i6833316731788722701/

41.clip-path 滾動特效

效果

視頻地址一：https://www.bilibili.com/video/BV1tQ4y1P7DW/

視頻地址二：https://www.ixigua.com/i6833685696041976323/

42.波浪div動畫效果

效果

視頻地址：https://www.ixigua.com/i6834042168265409027/

43.滾動傾斜的背景特效

效果

視頻地址一：https://www.bilibili.com/video/BV17p4y1D7UA/

視頻地址二：https://www.ixigua.com/i6834441977069568525/

44.計數器設計思路

效果：

視頻地址一：https://www.bilibili.com/video/BV1vQ4y1P7SW/

視頻地址二：https://www.ixigua.com/i6835920426430890499/

45.菜單懸停滑動特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1Sp4y1S7y7/

視頻地址二：https://www.ixigua.com/i6836281379467035147/

46.很棒的圖標懸停特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1ef4y127k5/

視頻地址二：https://www.ixigua.com/i6836657427052495373/

47.霓虹燈按鈕動畫效果的懸停

效果：

視頻地址一：https://www.bilibili.com/video/BV15k4y1z7gW/

視頻地址二：https://www.bilibili.com/video/BV15k4y1z7gW/

48.窗簾響應菜單特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1TT4y1J7qf/

視頻地址二：https://www.ixigua.com/i6838419811442098700/

49.新擬物按鈕懸停效果

效果：

視頻地址一：https://www.bilibili.com/video/BV1fv411q7AT/

視頻地址二：https://www.ixigua.com/i6838884535929668107/

50.新擬物卡片懸停特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1Df4y1y7am/

視頻地址二：https://www.ixigua.com/i6839252135687750156/

51.3D圖像翻轉特效

效果：

視頻地址一：https://www.ixigua.com/i6840006472894513676/

視頻地址二：https://www.bilibili.com/video/BV15A411i7dU/

52.響應式剪貼蒙版視差滾動效果

效果：

視頻地址一：https://www.ixigua.com/i6841112747518722568/

視頻地址二：https://www.bilibili.com/video/BV1hv411677o/

53.網站夜間日間特效

效果：

視頻地址一：https://www.ixigua.com/i6841112747518722568/

視頻地址二：https://www.bilibili.com/video/BV1pa4y1Y7n9/

54.文本旋轉動畫效果

效果：

視頻地址一：https://www.ixigua.com/i6841854545706877447/

視頻地址二：https://www.bilibili.com/video/BV1iC4y1a7wW/

55.創意按鈕懸停特效

效果：

視頻地址一：https://mp.toutiao.com/profile_v3/xigua/content-manage

視頻地址二：https://www.bilibili.com/video/BV1ZK411n7v7/

56.3D編輯文本特效

效果：

視頻地址一：https://www.ixigua.com/i6843709475413557764/

視頻地址二：https://www.bilibili.com/video/BV1oi4y1G7xz/

57.響應盒模型特效

效果：

58.數字時鐘特效

效果：

視頻地址一：https://www.ixigua.com/i6844451067896267278/

視頻地址二：https://www.bilibili.com/video/BV1bp4y1U7fS/

59.彈出框與模糊的背景特效

效果

視頻地址一：https://www.ixigua.com/i6845126624082395656/

視頻地址二：https://www.bilibili.com/video/BV1bA411i75h/

60.如何在文字內放置視頻

效果

視頻地址一：https://www.ixigua.com/6846310483146998275/

視頻地址二：https://www.bilibili.com/video/BV1B5411Y7A5/

61.反射屬性-webkit-box-reflect應用

效果

視頻地址一：https://www.ixigua.com/6847050168638898692/

視頻地址二：https://www.bilibili.com/video/BV1iA411e7Dr/

62.漸變發光加載動畫特效

效果

63.全屏加載頁面動畫特效

效果

視頻地址一：https://www.ixigua.com/6848908900436017676/

視頻地址二：https://www.bilibili.com/video/BV1zK4y1s7it/

64.圣誕節動畫特效

效果

視頻地址一：https://www.ixigua.com/6849270738138956299/

視頻地址二：https://www.bilibili.com/video/BV1g5411e7yQ/

65.粘糊糊的動畫效果

效果

視頻地址一：https://www.ixigua.com/6850016080396714499/

視頻地址二：https://www.bilibili.com/video/BV1wK4y1x7BY/

66.電視噪音動畫特效

效果

視頻地址一：https://www.ixigua.com/6850386816432865806/

視頻地址二：https://www.bilibili.com/video/BV1Jv411q7oh/

人才們的【三連】就是小智不斷分享的最大動力，如果本篇博客有任何錯誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。

所有特效源碼：https://blog.csdn.net/qq449245884/category_9873715.html

言

馬上我們就要進入下一個階段，也就是HTML和CSS實現前端界面的階段了，想必很多小伙伴都想給自己的頁面加點酷炫的特效，今天，我就給大家整理了一些非常酷炫的文字特效來裝點你的頁面！有些是從網絡上找的，有些是自己寫出來的

字體實例

下面就是一些字體實例了

鏤空字體

.loukong{ 
    /* 設置文字為透明，設置文本描邊*/ 
    background-color: #00c4ff;
    -webkit-text-fill-color: transparent; 
    -webkit-text-stroke:1px #000; 
}

立體字體

.liti{
    /* 文字左上設置多層淺色陰影，右下設置多層暗色陰影，文字色同背景色 */
    background-color: #d2d500;
    color: #d2d500;
    text-shadow: -1px -1px 0px #e6e600,-2px -2px 0px #e6e600,
    -3px -3px 0px #e6e600,1px 1px 0px #bfbf00,2px 2px 0px #bfbf00,3px 3px 0px #bfbf00;
 }

霓虹字體

.nihong{
    /* 深色底色，淺色文字，多層淺色文字陰影，彌散大 */
    background-color: darkgray;
    color: white;
    text-shadow: 0px 0px 15px #00FFFF,0px 0px 15px #00FFFF,0px 0px 15px #00FFFF;
 }

背景重疊

英文或者筆畫稀疏的文本比較適合，筆畫多看起來會不太好

.chongdie{
    /* 兩層背景，一層與被背景色相同，一層與文字色相同 */
    background-color: gray;
    color: #eee;
    text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
 }

幻色字體

.huanse{
    /* 兩層背景，沒啥技巧 */
    background-color: darkgray;
    color: white;
    text-shadow: 1px 1px 0px #0000FF,2px 2px 0px #0000FF,-1px -1px 0px #E31B4E,-2px -2px 0px #E31B4E;
 }

仿生字體

.fangsheng{
    /* 要把陰影與大小配合好，一般來說大小都是偏大時采用 */
    font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
    text-transform: uppercase;/* 全開大寫 */
    font-size: 92px;
    color: #f1ebe5;
    text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
    font-weight: bold;
    letter-spacing: -4px;
    background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%);
 }

漸變文字

因為需要用到背景裁切（-webkit-background-clip），所以需要再嵌套一個背景div

.jianbian{
    background-color: #009195;
  }
.jianbian-inner{
    background: linear-gradient(90deg,#f88,#88f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* -webkit-text-stroke: 1px #000000; */
 }

后記

以上就是全部內容了，靈活運用css的屬性，就能創造出很多你想得到的和想都想不到的特效，甚至一些連寫腳本都很難實現的特效，所以，努力探索css吧，沖沖沖！

轉自簡書：喬一丁_2020強化班
原文鏈接：https://www.jianshu.com/p/b7fd3cf53924

靠CSS 就寫出創意十足的設計是很困難的。到目前為止，就創建視覺特效而言，CSS 這門語言還是存在諸多限制。想用CSS 寫出Photoshop 般的效果，還差得很遠，個別情況下仍需要各種奇奇怪怪的招術助陣。

以前，要繞過種種限制，不得不犧牲簡潔性（加入大量元素，只為了展示效果的細節），或者犧牲性能（為了展現視覺效果，頁面中放了太多圖片及JavaScript）。

今天，我們就來介紹幾種能夠通過CSS 實現的特效。其中用到的一些CSS 特性還很新，瀏覽器支持不充分，但也有非常成熟的。很多特性在SVG 中已經存在很多年了，最近才加入到CSS 中。

這些技術能夠提升你的設計，就像做菜添加了調味料，平淡無奇的一盤菜也能頓時濃香四溢。使用它們的時候也得小心謹慎，必須考慮漸進式增強。另外也要知道，其中一些技術會有相關的bug。即使在支持它們的瀏覽器中，它們也通常還并不成熟。

圖1 展示了一個頁面（一些天體的介紹），其中包含很多視覺特效。就在幾年前，要通過CSS 實現這些效果幾乎是不可能的。整個頁面布局，就算能做出來，也要借助大量圖片和額外的HTML 元素。

今天，這些效果已經能夠在很多瀏覽器中通過CSS 來呈現了，即使做不到也能平穩地退化為可用版本。在一個頁面上集成大量視覺特效仍須謹慎，因為可能造成性能開銷，代價有大有小。

盡管如此，通過CSS 來完成它們仍然有很多好處，因為可以減少不必要的標記，而且維護起來比較容易。此外，隨著瀏覽器支持相應的規范，性能也會越來越好。

圖1 使用了很多視覺特效的頁面

接下來，我們就以這個“觀星指南”頁面作為例子，逐個講解其中涉及的技術點。

CSS Shapes

大家可能都知道，網頁布局基本上都是由矩形構成的，CSS Shapes 是一個新標準，旨在讓Web 設計者能使用各種形狀。形狀元素不僅會影響界面的外觀，還會影響頁面的內容流。

細說形狀

CSS Shapes 包含兩組新屬性，一組用于設置影響盒子中內容的形狀，另一組用于設置影響形狀元素周邊內容流的形狀。在圖2 中，我們看到一個被設置為圓形的形狀。其中左邊的圖形展示了外部形狀如何影響周邊的內容，而右邊的圖形展示了圓形中的內容如何受到內部形狀的影響。

圖2 外部形狀與內部形狀

這兩種形狀分別由不同級別的CSS Shapes 規范定義。其中shape-outside 屬性（在CSS Shapes Level 1 中定義）是唯一相對比較成熟的。本文不涉及shape-inside，因為目前還沒有瀏覽器實現它，也許在不久的將來會有吧。

shape-outside 屬性只能應用給浮動元素。這個屬性不改變元素自身的外觀，只會通過設置形狀影響其外部內容流。

在我們例子中的“Moon”部分，通過設置shape-outside: circle();實現了文本流環繞月亮圖片的效果（見圖3）。

.fig-moon {
 float: right;
 max-width: 40%;
 shape-outside: circle();
}

圖3 文本圍繞月亮圖片周圍的圓形實現了繞排

在解釋形狀構造原理之前，先了解一下shape-outside 如何影響布局。圖片文件本身的背景是黑色的，如果把這一區塊的背景改成其他顏色，我們會看得更清楚（見圖4）。圖片本身還是方形的，但文本流環繞著其中的圓形。在不支持CSS 形狀的瀏覽器中，文本會像往常一樣環繞矩形。

注意：如圖4 所示，文本流只繞排在浮動元素的左側。只能讓形狀的一側影響文本的行盒子。即使形狀右側有空間，文本也不會填進去。

1. 形狀函數

前面例子中的shape-outside 屬性使用了一個值：circle()。這是一個形狀函數，類似的形狀函數還有ellipse()、polygon()、inset()。前兩個分別用于定義橢圓形和多邊形，inset()則表示嵌入在盒子邊界內的矩形，也可以指定圓角，算是CSS 2.1 中clip 屬性的加強版，只是語法不同而已。

此處圓形和橢圓形的語法，類似于第5 章的放射性漸變的大小及位置的語法：

.shape-circle {
 /* 圓形接受一個半徑值和一個位置值 */
 shape-outside: circle(150px at 50%);
}
.shape-ellipse {
 /* 橢圓形接受兩個半徑值和一個位置值 */
 shape-outside: ellipse(150px 40px at 50% 25%);
}

與漸變函數類似，圓形和橢圓形函數也有合理的默認值。前面月亮圖片的circle()函數并未傳入參數，而默認的參數是以元素中心為圓心，以最近邊為半徑。

inset()函數需要傳入一組長度值，分別表示到上、右、下、左邊的距離，很像margin 和padding 簡寫。同樣，1~3 個值的外邊距和內邊距簡寫規則在這里也適用。此外，還可以通過round關鍵字指定圓角，隨后是半徑值，與border-radius 屬性的類似：

.shape-inset {
 /* 距離外部盒子的上、下邊各20 像素，
 * 距離外部盒子的左、右邊各30 像素，
 * 還有半徑為10 像素的圓角
 */
 shape-outside: inset(20px 30px round 10px);
}

相對復雜一些的是polygon()函數。這個函數接受一系列坐標對，用于在盒子表面指定多個點，坐標相對于盒子的左上角，最終把各個點連接起來就是要創建的形狀。在“Planets”部分，我們為土星創建了一個多邊形。

創建多邊形最簡單的一種方式就是使用CSS Shapes Editor 插件，它支持Chrome 和Opera。Chrome 和Opera 都支持CSS Shapes，而且會在檢查形狀元素時給出預覽。這個插件會添加額外的工具，因此既可以通過它看到形狀如何影響頁面，也可以通過創建并拖動控制點來創建新形狀（見圖5）。

圖5 在Chrome 中通過Shapes Editor 插件繪制的形狀

然后就可以把得到的多邊形復制粘貼到代碼中：

.fig-planet {
 float: right;
 max-width: 65%;
 shape-outside: polygon(41.85% 100%, 22.75% 92.85%, 5.6% 73.3%, 0.95% 52.6%, 5.6% 35.05%,
21.45% 17.15%, 37.65% 12.35%, 40% 0, 100% 0%, 100% 100%);
}

多邊形中每個點的坐標以百分比表示，這樣可以保證最大的靈活度。當然也可以在這里使用任意長度值，比如像素、em，甚至calc()表達式。

2. 形狀圖片

基于復雜的圖片創建多邊形會非常麻煩。好在我們可以直接在圖片的源文件上基于透明度來創建形狀。比如，可以比照預期的形狀新創建一張圖片。但土星的圖片已經是帶透明度的PNG格式了，因此可以直接通過它來生成形狀。我們要做的就是把shape-outside 的值由polygon()函數修改為指向該圖片的url()函數：

.fig-planet {
 float: right;
 max-width: 65%;
 shape-outside: url(img/saturn.png);
}

如果在Chrome 開發者工具里檢查這張圖片，會看到如圖6 所示的模樣。可以看到，圖片的透明度數據被用于生成形狀了。

圖6 圖片透明區域的輪廓被用于生成形狀

提示：只通過瀏覽器打開HTML 文件是不行的，就算瀏覽器支持CSS Shapes 也不行。必須通過Web 服務器取得這個頁面，這樣引用的圖片才會帶有合適的HTTP 首部信息，告訴瀏覽器該圖片與CSS 來自同一個域。這種安全機制是較新的瀏覽器才有的，是為了防止引用的文件對你的計算機造成危害。

默認情況下，形狀輪廓會沿圖片完全透明區域的邊緣生成，但這個值可以通過shape-imagethreshold 屬性來修改。默認值是0.0（完全透明），而較大的值（最大為1.0）意味著較高的不透明度也可以用于生成形狀邊界。比如，修改土星圖片的不透明度閾值為0.9，則半透明的土星環將不再被包含在形狀內，結果文本會覆蓋其上（見圖7）。

.fig-planet {
 float: right;
 max-width: 65%;
 shape-outside: url(img/saturn.png);
 shape-image-threshold: 0.9;
}

圖7 使用shape-image-threshold 提高不透明度閾值后，原來圖片中半透明的部分在生

3. 形狀盒子與邊距

除了使用形狀函數或圖片，還可以使用元素的參照盒子來生成形狀。乍一聽好像有點不對，畢竟元素盒子都是方形的。不過，形狀也能依照圓角生成。

比如，以前面的月亮圖片為例，如果我們想改變區塊背景的顏色，同時也去掉圖片周圍的黑色區域（如圖11-8 所示），那么可以在圖片上使用border-radius 來創建圓形。

.fig-moon {
 float: right;
 max-width: 40%;
 border-radius: 50%;
}

圖8 給月亮圖片應用border-radius

僅有圓角邊框還不能生成形狀，還得通過shape-outside 屬性告訴瀏覽器，以border-box作為生成形狀的依據。

.fig-moon {
 float: right;
 max-width: 40%;
 border-radius: 50%;
 shape-outside: border-box;
}

這樣外部形狀就變成了環繞元素邊框盒子的圓形。其他能生成形狀的參照盒子還有content-box、padding-box 和margin-box。margin-box 是個例外。因為形狀是基于浮動區域的，浮動區域也包含外邊距，所以這個關鍵字是專門為形狀定義的，并沒有box-sizing: margin-box 這種用法。

對于形狀而言，參照盒子為margin-box 時，形狀仍然會參照圓角邊框，但這樣一來就可以像定義常規的外邊距一樣，給月亮圖片周圍添加一些邊距了。

.fig-moon {
 float: right;
 max-width: 40%;
 border-radius: 50%;
 shape-outside: margin-box;
 margin: 2em;
}

這樣，文本會環繞著弧形的外邊距形狀排布。如果在Chrome 開發者工具中檢查圖片，可以看到此時形狀的樣子，還有原始的外邊距（見圖9）。

圖9 將margin-box 作為形狀的參照后，可以為形狀設置外邊距

如果想給更復雜的土星圖片添加外邊距，可以使用另一個屬性shape-margin，這個屬性用于給整個形狀添加外邊距，與創建形狀的方法無關（見圖10）。

.fig-planet {
 max-width: 65%;
 shape-outside: url(img/saturn.png);
 shape-margin: 1em;
}

圖10 為土星形狀添加shape-margin 屬性

剪切與蒙版

CSS 形狀雖然可以影響周圍文本流，卻不允許你修改元素自身的外觀。添加圓角邊框只是視覺上改變元素形狀的一種方式。實際上，通過把元素的部分區域變透明，是可以影響元素自身形狀的。

剪切（clipping）使用路徑形狀定義硬邊界，可以基于該邊界完全切換元素的可見性。蒙版（masking）不太一樣，它用于將元素的某些區域設置為更透明或更不透明。剪切會影響對象的響應區域，而蒙版不會。比如要觸發懸停，鼠標必須移到剪切后元素的可見區域。而對于加了蒙版的元素，無論鼠標下面的區域是否可見，只要位于該元素上，都會激活:hover 狀態。

一、剪切

剪切最早是在CSS 2.1 中通過clip 屬性引入的。但這個屬性只能應用給絕對定位的元素，而且只能把這些元素剪切為矩形（使用rect()函數）。沒勁！

好在新的clip-path 屬性提供了更多選擇。它可以使用CSS 形狀中的基本形狀函數定義如何剪切元素。它還能使用SVG 文檔剪切元素，只要通過URL 引用一個<clipPath>元素即可。

下面從使用形狀函數定義剪切路徑開始。這個特性之前只有Blink 和WebKit 內核的瀏覽器支持，而且除了不加前綴的屬性，還要使用加-webkit-前綴的屬性。為簡單起見，后面的例子只展示不加前綴的標準屬性。

“觀星指南”頁面中的所有區塊都是被剪切過的，因此都有一些向對角線傾斜（見圖11）。

圖11 頁面中的所有區塊都被剪切過，因此都有點傾斜

每個區塊都有一個stacked 類，其中使用多邊形函數指定了剪切路徑：

.stacked {
 clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0% 100%);
}

這個多邊形沒有前面土星的多邊形復雜，因此可以稍微深入地講解一下。多邊形中的每一個點都對應著一對空格分隔的值，值對之間以逗號隔開。

先從左上角開始，0 3vw 表示x 軸剪切長度為0，y 軸剪切長度為3vw。這里使用相對視口的單位保證角度以視口大小為參照。接下來的坐標是右上角坐標100% 0。第三個100% calc(100% -3vw)指距右下角3vw，它不能使用百分比表示，因為這個y 軸坐標是從上方開始計算的。最后，左下角的坐標是0 100%。

因為剪切路徑只影響元素渲染后的外觀，而不會影響頁面流，所以剪切后的元素之間會出現透明間隙（見圖11-12）。為消除間隙，可以給每個堆疊的區塊應用一個負外邊距，而且要比3vm稍大一些，好讓相鄰的區塊邊緣能彼此重疊。但我們只希望在支持clip-path 的瀏覽器中應用這個負外邊距，這時候正好可以用上@supports 規則。因為這些新的特效只在較新的瀏覽器中才存在，所以我們可以放心地這么寫：

@supports ((clip-path: polygon(0 0)) or
 (-webkit-clip-path: polygon(0 0))) {
 .stacked {
 margin-bottom: -3.4vw;
 }
}

圖12 如果只應用剪切，區塊之間會出現間隙

在@supports 規則塊中，我們測試了瀏覽器是否支持最小的多邊形（只有一個點）。增加這些保障后，區塊就可以完美地對齊了。而在不支持clip-path 的瀏覽器中，區塊也會像平常一樣上下相接，不會重疊。

使用SVG

可以使用polygon()、circle()、ellipse()和inset() 函數創建剪切路徑，與創建CSS形狀一樣。對于復雜的形狀，建議大家還是使用圖片編輯器來創建，然后再將最終的圖形作為剪切路徑的源。我們在頁面導航中使用的形狀就是這樣生成的，如圖13 所示。

圖13 導航區中復雜的形狀是基于SVG 源實現的剪切

使用圖形作為剪切源，需要先使用SVG 創建剪切路徑，然后再通過一個URL 引用到形狀函數中。首先，要在Illustrator、Sketch 或Inkscape 之類的圖形編輯器中創建想要的形狀。雖然不那么簡單，但還是可行的。

導航區塊本身是一個包含頁內鏈接的無序列表：

<nav class="stacked section nav-section inverted">
 <ul class="wrapper">
 <li><a href="#moon">The Moon</a></li>
 <li><a href="#sun">The Sun</a></li>
 <li><a href="#planets">Planets</a></li>
 <li><a href="#milky-way">Galaxy</a></li>
 <li><a href="#universe">Universe</a></li>
 </ul>
</nav>

在此，我們就不涉及導航本身的樣式了，大家只要知道這里用到了Flexbox 水平布局導航項目，將它們固定為100 像素見方的方塊就夠了。

然后，在支持SVG 的圖形編輯器（我們用的是Adobe Illustrator）中創建一張圖片。圖片的大小也是100 像素見方（見圖14）。其中的星球由兩個黑色的形狀構成，一個圓形和一個旋轉后的橢圓形。接著把這個圖片保存為SVG 格式，命名為clip.svg。保存過程因編輯器而異，這里

就不說了，我們只關注大體的流程。

圖14 使用Illustrator 創建的星球圖形

下面在代碼編輯器中打開生成的SVG 文件，看上去大概是這樣的：

<svg xmlns=http://www.w3.org/2000/svg width="100px" height="100px" viewBox="0 0 100 100">
 <circle cx="50" cy="50" r="45"/>
 <ellipse transform="matrix(-0.7553 0.6554 -0.6554 -0.7553 -12.053 54.99)" cx="50" cy="50"
rx="63.9" ry="12.8"/>
</svg>

為了把這個圖片轉換為剪切路徑，需要把其內容包裝在一個<clipPath>元素中，并添加一個ID 屬性：

<svg xmlns="SVG namespace"
 width="100px" height="100px" viewBox="0 0 100 100">
 <clipPath id="saturnclip">
 <circle cx="50" cy="50" r="40.1"/>
 <ellipse transform="matrix(0.7084 -0.7058 0.7058 0.7084 -20.7106 49.8733)" cx="50"
 cy="50" rx="62.9" ry="12.8"/>
 </clipPath>
</svg>

最后，就可以在CSS 中引用clip.svg 中的這個剪切路徑了：

.nav-section [href="#planets"] {
 clip-path: url(img/clip.svg#saturnclip);
}

這樣就可以把多個剪切源保存在一個SVG 文件中，然后通過URL 的片段ID 分別引用。

二、蒙版

“觀星指南”頁面的標題好像半隱于地球大氣層的后面（見圖15）。這種透明漸隱效果是通過蒙版實現的。

圖15 頁面標題“Stargazing”通過蒙版實現了漸隱效果

Safari 早在2008 年就實現了蒙版，使用的是非標準屬性-webkit-mask-image。這個屬性允許指定一張圖片，并以這張圖片作為加蒙版元素透明度層次的來源。作為蒙版的圖片中，每個像素都有一個阿爾法級別（alpha level），也就是透明度。如果蒙版圖片中的像素是透明的，那么加蒙版元素中對應的像素也不可見。相反，蒙版圖片中完全不透明的區域，對應的加蒙版元素的區域也會完全可見。蒙版圖片的顏色與此無關，因此灰度圖常用作蒙版。

除了圖片，還可以使用CSS 漸變來創建蒙版。頁面標題的蒙版效果就是這么做的：

.header-title {
 mask-image: radial-gradient(ellipse 90% 30% at 50% 50%,
 rgba(0,0,0,0) 45%,
 #000 70%);
 mask-size: 100% 200%;
}

相信大家都了解這個語法：mask-image 后面的值非常類似background-image 屬性的值，甚至也可以聲明多個蒙版。

除了指定蒙版圖片，還可以指定蒙版的大小和位置。對于我們這個例子而言，為了把蒙版放到文本底部，我們將它的高度聲明為兩倍，而沒有使用定位。如果我們在這里簡單地把漸變圖片移動到下面，那么蒙版圖片的上半部分就會是透明的，結果就是文本的上半部分不可見。圖16展示了漸變蒙版的大小和位置，以及它與文本的相對位置關系。

圖16 蒙版圖片看起來就像是位于文本上方

在WebKit 最初實現的基礎上，蒙版相關的屬性得以標準化和擴展，同時也支持了對應的SVG效果。沒錯，就像clip-path 一樣，SVG 中的蒙板也可以應用給HTML 內容。

.header-title {
 /*嵌入頁面中的CSS，指向嵌入同一頁面中的SVG <mask>元素*/
 mask: url(#ellipseMask);
}
與前面CSS 漸變等價的SVG 標記如下：
<mask id="ellipseMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
 <radialGradient id="radialfill" r="0.9" cy="1.1">
 <stop offset="45%" stop-color="#000"/>
 <stop offset="70%" stop-color="#fff"/>
 </radialGradient>
</mask>

與剪切路徑一樣，這里也需要使用objectBoundingBox 坐標系，按照0~1 的比例尺將蒙版縮放到與元素邊界匹配。SVG 蒙版元素本身還有一個maskContentUnits 屬性，這里也將其設置為與蒙版形狀相同的坐標系。

SVG 蒙版源使用明度值（luminance）而非阿爾法級別來應用蒙版。這意味著蒙版較暗的區域對應的加蒙版元素區域會較透明，而蒙版較亮的區域對應的加蒙版元素區域會較不透明。在前面SVG 蒙版的例子中，我們使用了黑白漸變。

瀏覽器會在你使用蒙版圖片時使用阿爾法級別，在你使用SVG 蒙版時使用明度值。在對標準的建議中，有一個mask-type 屬性可以切換這個應用蒙版的依據值。

另外，-webkit-前綴版與建議的標準版屬性之間也有一些差異。可以參考MDN 中WebKit實現的完整屬性和語法。

——

本文很大程度上跳出了沉悶單調的頁面盒子世界。我們探討了如何通過CSS 形狀美化頁面中的元素，以及如何通過剪切路徑畫出視覺邊界。使用蒙版則可以進一步控制界面中元素的可見性。

通過這些特效的學習，我們也看到了SVG 與CSS 結合的威力，也極大擴展了我們未來設計的想象空間。

——本文節選自《精通CSS：高級Web標準解決方案（第3版）》

CSS暢銷經典全面升級

CSS作為Web標準的一部分，是現代網頁設計中必不可少的關鍵元素。鑒于CSS標準化的快速發展，想要成為CSS高手，打造出令人驚艷、辨識度高的網站，就必須充分了解當前CSS規范各模塊的新特性、新技術和新思想。

本書是經典CSS參考指南，自第1版出版至今一直暢銷不衰。第3版針對當前瀏覽器支持度足夠好的CSS特性全面改寫，著眼于如何為更大、更復雜的網站編寫優雅、巧妙、易維護的代碼。兩位作者均是技術與寫作才能俱佳的開發高手，他們將自己對現代CSS實踐的深刻理解融入書中，結合大量復雜實現情景，清晰展示了如何利用新技術寫出高度靈活、易維護和可擴展的代碼，并讓這些代碼在不同瀏覽器和不同平臺上跑起來。

第1章　基礎知識

第2章　添加樣式

第3章　可見格式化模型

第4章　網頁排版

第5章　漂亮的盒子

第6章　內容布局

第7章　頁面布局與網格

第8章　響應式Web設計與CSS

第9章　表單與數據表

第10章　變換、過渡與動畫

第11章　高級特效

第12章　品控與流程

在線咨詢

上一篇：辦公自動化：Python中使用Excel / XLSX
下一篇：html文件如何轉成word？這幾個步驟看完你就懂了

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

歷時4個多月，學習了這 66 個CSS 特效

01.波浪文本動畫

02.漣漪動畫

03.視頻字幕懸停特效

04-新擬物單選按鈕效果

05-全屏視頻背景滾動淡出

06-創意產品卡

07.創意菜單項懸停特效

08.怎么配合視頻做好 CSS 特效

09.制作有個性的滾動條

10.BoxShadow 初級到高級特效

11.僅使用CSS對任何SVG圖標進行動畫處理

12.使用 CSS3 實現響應式推薦卡片

13.新擬物炫酷時鐘

14.使用 CSS Grid 實現瀑布流布局

15.2.5D視差效應

16.純CSS3水波動畫特效

17.圓形進度條

18.3D透視圖與分層圖像懸停效果

19.顯示隱藏密碼框

20.立體卡片展示特效

21.按鈕懸停特效

22.文字肖像和鼠標移動視差效果

23.輸入框驗證特效

24.粘性導航特效

25.有趣的子彈聲特效

26.漸變發光卡片

27.實現長陰影網頁特效

28.發光復選框特效

29. 酷炫 Loading 特效

30.鼠標移動多彩心網頁特效

31.實現定價卡懸停特效

32. 3D 翻轉卡片特效

33.視頻滑塊特效

34.像素化圖像懸停特效

35.按鈕懸停效霓虹燈特效

36.笑臉評分欄特效

37.鼠標移動線條特效

38.鼠標移動炫酷特效

39.粘滯滾動特效

40.新擬物 checkbox 特效

41.clip-path 滾動特效

42.波浪div動畫效果

43.滾動傾斜的背景特效

44.計數器設計思路

45.菜單懸停滑動特效

46.很棒的圖標懸停特效

47.霓虹燈按鈕動畫效果的懸停

48.窗簾響應菜單特效

49.新擬物按鈕懸停效果

50.新擬物卡片懸停特效

51.3D圖像翻轉特效

52.響應式剪貼蒙版視差滾動效果

53.網站夜間日間特效

54.文本旋轉動畫效果

55.創意按鈕懸停特效

56.3D編輯文本特效

57.響應盒模型特效

58.數字時鐘特效

59.彈出框與模糊的背景特效

60.如何在文字內放置視頻

61.反射屬性-webkit-box-reflect應用

62.漸變發光加載動畫特效

63.全屏加載頁面動畫特效

64.圣誕節動畫特效

65.粘糊糊的動畫效果

66.電視噪音動畫特效

言

相關屬性介紹

-webkit-text-fill-color

-webkit-text-stroke

text-shadow

-webkit-background-clip

字體實例

鏤空字體

立體字體

霓虹字體

背景重疊

幻色字體