历时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

字体实例

镂空字体

立体字体

霓虹字体

背景重叠

幻色字体