歷時(shí)4個(gè)多月，學(xué)習(xí)了這 66 個(gè)CSS 特效

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

對(duì)于 CSS 評(píng)價(jià)，無(wú)論是在論壇還是身邊的人，我聽(tīng)到最多的是學(xué) CSS 這些花里胡哨沒(méi)啥用，實(shí)際項(xiàng)目中又用不到。聽(tīng)到這些心里還是挺實(shí)受挫的，有時(shí)候會(huì)懷疑自己，我學(xué)習(xí)的方向是不是錯(cuò)了。但在幾次的項(xiàng)目需要用到一些特效，我都能很快的找到思路并做出來(lái)，我想這是得益于，我平時(shí)所學(xué)的這些特效積累出來(lái)的。

現(xiàn)在我不在困惑我所學(xué)的東西，因?yàn)閷W(xué)習(xí)成長(zhǎng)是你自己事情，而不是別人在意的眼光。

這個(gè)系列我會(huì)一直學(xué)習(xí)下去，第一季 66 節(jié)課，已經(jīng)更完畢，所有的源碼都在下面的地址：

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

01.波浪文本動(dòng)畫(huà)

效果

圖片描述

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

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

02.漣漪動(dòng)畫(huà)

效果

圖片描述

視頻地址一：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-全屏視頻背景滾動(dòng)淡出

效果

圖片描述

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

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

06-創(chuàng)意產(chǎn)品卡

效果

圖片描述

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

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

07.創(chuàng)意菜單項(xiàng)懸停特效

效果

圖片描述

視頻地址一：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.制作有個(gè)性的滾動(dòng)條

圖片描述

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

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

10.BoxShadow 初級(jí)到高級(jí)特效

效果

圖片描述

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

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

11.僅使用CSS對(duì)任何SVG圖標(biāo)進(jìn)行動(dòng)畫(huà)處理

效果

圖片描述

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

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

12.使用 CSS3 實(shí)現(xiàn)響應(yīng)式推薦卡片

效果

圖片描述

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

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

13.新擬物炫酷時(shí)鐘

效果

圖片描述

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

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

14.使用 CSS Grid 實(shí)現(xiàn)瀑布流布局

效果

圖片描述

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

15.2.5D視差效應(yīng)

clipboard.png

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

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

16.純CSS3水波動(dòng)畫(huà)特效

效果

圖片描述

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

17.圓形進(jìn)度條

效果

圖片描述

視頻地址一：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.文字肖像和鼠標(biāo)移動(dòng)視差效果

效果：

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

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

23.輸入框驗(yàn)證特效

效果：

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

24.粘性導(dǎo)航特效

效果：

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

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

25.有趣的子彈聲特效

效果：

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

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

26.漸變發(fā)光卡片

效果：

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

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

27.實(shí)現(xiàn)長(zhǎng)陰影網(wǎng)頁(yè)特效

效果：

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

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

28.發(fā)光復(fù)選框特效

效果：

視頻地址一：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.鼠標(biāo)移動(dòng)多彩心網(wǎng)頁(yè)特效

效果：

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

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

31.實(shí)現(xiàn)定價(jià)卡懸停特效

效果：

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

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

32. 3D 翻轉(zhuǎn)卡片特效

效果：

視頻地址一：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.笑臉評(píng)分欄特效

效果：

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

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

37.鼠標(biāo)移動(dòng)線(xiàn)條特效

效果：

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

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

38.鼠標(biāo)移動(dòng)炫酷特效

效果

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

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

39.粘滯滾動(dòng)特效

效果：

視頻地址一：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 滾動(dòng)特效

效果

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

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

42.波浪div動(dòng)畫(huà)效果

效果

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

43.滾動(dòng)傾斜的背景特效

效果

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

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

44.計(jì)數(shù)器設(shè)計(jì)思路

效果：

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

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

45.菜單懸停滑動(dòng)特效

效果：

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

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

46.很棒的圖標(biāo)懸停特效

效果：

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

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

47.霓虹燈按鈕動(dòng)畫(huà)效果的懸停

效果：

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

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

48.窗簾響應(yīng)菜單特效

效果：

視頻地址一：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圖像翻轉(zhuǎn)特效

效果：

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

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

52.響應(yīng)式剪貼蒙版視差滾動(dòng)效果

效果：

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

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

53.網(wǎng)站夜間日間特效

效果：

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

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

54.文本旋轉(zhuǎn)動(dòng)畫(huà)效果

效果：

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

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

55.創(chuàng)意按鈕懸停特效

效果：

視頻地址一：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.響應(yīng)盒模型特效

效果：

58.數(shù)字時(shí)鐘特效

效果：

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

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

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

效果

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

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

60.如何在文字內(nèi)放置視頻

效果

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

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

61.反射屬性-webkit-box-reflect應(yīng)用

效果

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

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

62.漸變發(fā)光加載動(dòng)畫(huà)特效

效果

63.全屏加載頁(yè)面動(dòng)畫(huà)特效

效果

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

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

64.圣誕節(jié)動(dòng)畫(huà)特效

效果

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

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

65.粘糊糊的動(dòng)畫(huà)效果

效果

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

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

66.電視噪音動(dòng)畫(huà)特效

效果

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

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

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

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

果圖

今天給大家?guī)?lái)的是 CSS3圖片翻頁(yè)動(dòng)畫(huà)（10種動(dòng)畫(huà)）！

豐富一下列位的特效儲(chǔ)備庫(kù)！

文件版源碼獲取，請(qǐng)看評(píng)論區(qū)！

廢話(huà)不多說(shuō)，上源碼！

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>網(wǎng)格縮略圖動(dòng)畫(huà)</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>

言

馬上我們就要進(jìn)入下一個(gè)階段，也就是HTML和CSS實(shí)現(xiàn)前端界面的階段了，想必很多小伙伴都想給自己的頁(yè)面加點(diǎn)酷炫的特效，今天，我就給大家整理了一些非常酷炫的文字特效來(lái)裝點(diǎn)你的頁(yè)面！有些是從網(wǎng)絡(luò)上找的，有些是自己寫(xiě)出來(lái)的

字體實(shí)例

下面就是一些字體實(shí)例了

鏤空字體

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

立體字體

.liti{
    /* 文字左上設(shè)置多層淺色陰影，右下設(shè)置多層暗色陰影，文字色同背景色 */
    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;
 }

背景重疊

英文或者筆畫(huà)稀疏的文本比較適合，筆畫(huà)多看起來(lái)會(huì)不太好

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

幻色字體

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

仿生字體

.fangsheng{
    /* 要把陰影與大小配合好，一般來(lái)說(shuō)大小都是偏大時(shí)采用 */
    font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
    text-transform: uppercase;/* 全開(kāi)大寫(xiě) */
    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%);
 }

漸變文字

因?yàn)樾枰玫奖尘安们校?webkit-background-clip），所以需要再嵌套一個(gè)背景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; */
 }

后記

以上就是全部?jī)?nèi)容了，靈活運(yùn)用css的屬性，就能創(chuàng)造出很多你想得到的和想都想不到的特效，甚至一些連寫(xiě)腳本都很難實(shí)現(xiàn)的特效，所以，努力探索css吧，沖沖沖！

轉(zhuǎn)自簡(jiǎn)書(shū)：?jiǎn)桃欢2020強(qiáng)化班
原文鏈接：https://www.jianshu.com/p/b7fd3cf53924

在線(xiàn)咨詢(xún)

上一篇：寫(xiě)幾個(gè)html，怎么打包成本地app或exe？
下一篇：各種各樣加密算法的js庫(kù)，安全加密不再愁-crypto-js

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

歷時(shí)4個(gè)多月，學(xué)習(xí)了這 66 個(gè)CSS 特效

01.波浪文本動(dòng)畫(huà)

02.漣漪動(dòng)畫(huà)

03.視頻字幕懸停特效

04-新擬物單選按鈕效果

05-全屏視頻背景滾動(dòng)淡出

06-創(chuàng)意產(chǎn)品卡

07.創(chuàng)意菜單項(xiàng)懸停特效

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

09.制作有個(gè)性的滾動(dòng)條

10.BoxShadow 初級(jí)到高級(jí)特效

11.僅使用CSS對(duì)任何SVG圖標(biāo)進(jìn)行動(dòng)畫(huà)處理

12.使用 CSS3 實(shí)現(xiàn)響應(yīng)式推薦卡片

13.新擬物炫酷時(shí)鐘

14.使用 CSS Grid 實(shí)現(xiàn)瀑布流布局

15.2.5D視差效應(yīng)

16.純CSS3水波動(dòng)畫(huà)特效

17.圓形進(jìn)度條

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

19.顯示隱藏密碼框

20.立體卡片展示特效

21.按鈕懸停特效

22.文字肖像和鼠標(biāo)移動(dòng)視差效果

23.輸入框驗(yàn)證特效

24.粘性導(dǎo)航特效

25.有趣的子彈聲特效

26.漸變發(fā)光卡片

27.實(shí)現(xiàn)長(zhǎng)陰影網(wǎng)頁(yè)特效

28.發(fā)光復(fù)選框特效

29. 酷炫 Loading 特效

30.鼠標(biāo)移動(dòng)多彩心網(wǎng)頁(yè)特效

31.實(shí)現(xiàn)定價(jià)卡懸停特效

32. 3D 翻轉(zhuǎn)卡片特效

33.視頻滑塊特效

34.像素化圖像懸停特效

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

36.笑臉評(píng)分欄特效

37.鼠標(biāo)移動(dòng)線(xiàn)條特效

38.鼠標(biāo)移動(dòng)炫酷特效

39.粘滯滾動(dòng)特效

40.新擬物 checkbox 特效

41.clip-path 滾動(dòng)特效

42.波浪div動(dòng)畫(huà)效果

43.滾動(dòng)傾斜的背景特效

44.計(jì)數(shù)器設(shè)計(jì)思路

45.菜單懸停滑動(dòng)特效

46.很棒的圖標(biāo)懸停特效

47.霓虹燈按鈕動(dòng)畫(huà)效果的懸停

48.窗簾響應(yīng)菜單特效

49.新擬物按鈕懸停效果

50.新擬物卡片懸停特效

51.3D圖像翻轉(zhuǎn)特效

52.響應(yīng)式剪貼蒙版視差滾動(dòng)效果

53.網(wǎng)站夜間日間特效

54.文本旋轉(zhuǎn)動(dòng)畫(huà)效果

55.創(chuàng)意按鈕懸停特效

56.3D編輯文本特效

57.響應(yīng)盒模型特效

58.數(shù)字時(shí)鐘特效

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

60.如何在文字內(nèi)放置視頻

61.反射屬性-webkit-box-reflect應(yīng)用

62.漸變發(fā)光加載動(dòng)畫(huà)特效

63.全屏加載頁(yè)面動(dòng)畫(huà)特效

64.圣誕節(jié)動(dòng)畫(huà)特效

65.粘糊糊的動(dòng)畫(huà)效果

66.電視噪音動(dòng)畫(huà)特效

CSS源碼：

index源碼：

言

相關(guān)屬性介紹

-webkit-text-fill-color

-webkit-text-stroke

text-shadow

-webkit-background-clip

字體實(shí)例

鏤空字體

立體字體

霓虹字體