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

時間 2020-07-21

標籤歷時多月學習 css 特效欄目 CSS 简体版

原文原文鏈接

點贊再看，微信搜索 【大遷世界】關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

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

對於 CSS 評價，不管是在論壇仍是身邊的人，我聽到最多的是學 CSS 這些花裏胡哨沒啥用，實際項目中又用不到。聽到這些內心仍是挺實受挫的，有時候會懷疑本身，我學習的方向是否是錯了。但在幾回的項目須要用到一些特效，我都能很快的找到思路並作出來，我想這是得益於，我平時所學的這些特效積累出來的。前端

如今我不在困惑我所學的東西，由於學習成長是你本身事情，而不是別人在乎的眼光。git

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

https://blog.csdn.net/qq44924...

這個須要2瓶快樂水的錢，畢竟整理這些仍是挺幸苦的，有興趣的能夠本身看看。web

01.波浪文本動畫

效果segmentfault

視頻地址1：https://www.ixigua.com/i68077...微信

視頻地址2：https://www.bilibili.com/vide...ide

02.漣漪動畫

效果svg

歷時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.電視噪音動畫特效

交流