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

果图

今天给大家带来的是 CSS3图片翻页动画（10种动画）！

丰富一下列位的特效储备库！

文件版源码获取，请看评论区！

废话不多说，上源码！

CSS源码：

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

@font-face {

font-family: 'codropsicons';

src:url('../fonts/codropsicons/codropsicons.eot');

src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),

url('../fonts/codropsicons/codropsicons.woff') format('woff'),

url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),

url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');

font-weight: normal;

font-style: normal;

}

body {

background: #81c439;

color: #fff;

font-family: 'Lato', Arial, sans-serif;

}

.clearfix:before,

.clearfix:after {

content: '';

display: table;

}

.clearfix:after {

clear: both;

}

a {

color: rgba(255,255,255,0.7);

text-decoration: none;

outline: none;

}

a:hover,

a:focus {

color: #fff

}

.container > header {

margin: 0 auto;

padding: 2em 15% 0;

text-align: center;

}

.container > header h1 {

font-size: 1.8em;

line-height: 1.3;

margin: 0;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 2px;

word-spacing: 5px;

}

.container > header span {

display: block;

font-size: 60%;

opacity: 0.7;

padding: 0 0 0.6em 0.1em;

}

/* To Navigation Style */

.codrops-top {

background: rgba(255, 255, 255, 0.1);

text-transform: uppercase;

width: 100%;

font-size: 0.69em;

line-height: 2.2;

font-weight: 700;

}

.codrops-top a {

text-decoration: none;

padding: 0 1em;

letter-spacing: 0.1em;

display: inline-block;

}

.codrops-top a:hover {

background: rgba(255,255,255,0.95);

color: #81c439;

}

.codrops-top span.right {

float: right;

}

.codrops-top span.right a {

float: left;

display: block;

}

.codrops-icon:before {

font-family: 'codropsicons';

margin: 0 4px;

speak: none;

font-style: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

line-height: 1;

-webkit-font-smoothing: antialiased;

}

.codrops-icon-drop:before {

content: "\e001";

}

.codrops-icon-prev:before {

content: "\e004";

}

/* Demo Buttons Style */

.codrops-demos {

padding-top: 1em;

max-width: 700px;

margin: 0 auto;

}

.codrops-demos a {

text-decoration: none;

outline: none;

display: inline-block;

font-weight: 700;

text-transform: uppercase;

font-size: 0.8em;

margin: 0.5em 0.4em;

letter-spacing: 1px;

background: rgba(0,0,0,0.1);

padding: 0.4em 0.9em;

-webkit-transition: all 0.2s;

transition: all 0.2s;

}

.codrops-demos a.current-demo,

.codrops-demos a:hover,

.codrops-demos a:focus {

opacity: 1;

background: rgba(0,0,0,0.25);

}

section {

text-align: center;

font-size: 150%;

padding: 1em 1% 2em;

}

@media screen and (max-width: 25em) {

.codrops-icon span {

display: none;

}

index源码：

<!DOCTYPE html>

<html>

<head>

<title>Animations for Thumbnail Grids | Demo 1</title>

</head>

<body>

<div>

<h1>网格缩略图动画</h1>

<nav>

<a href="index2.html">Slide</a>

<a href="index3.html">Rotate Fall</a>

<a href="index4.html">Rotate Scale</a>

<a href="index5.html">Stack</a>

<a href="index7.html">Bring back</a>

<a href="index8.html">Superscale</a>

<a href="index9.html">Center Flip</a>

<a href="index10.html">Front Row</a>

</nav>

</header>

</ul>

<nav>

</nav>

</section>

</div>

</body>

</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

在线咨询

上一篇：写几个html，怎么打包成本地app或exe？
下一篇：各种各样加密算法的js库，安全加密不再愁-crypto-js

您的项目需求

*请认真填写需求信息，我们会在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.电视噪音动画特效

CSS源码：

index源码：

言

相关属性介绍

-webkit-text-fill-color

-webkit-text-stroke

text-shadow

-webkit-background-clip

字体实例

镂空字体

立体字体

霓虹字体