HTML+CSS基礎入門開發，經典Loading加載

HTML+CSS基礎入門開發，經典Loading加載縮放動畫特效

家好，本篇文章分享經典Loading加載縮放動畫特效，歡迎參考和指正。

效果圖：

Loading加載縮放動畫特效

HTML代碼：

<div class="tui-demo-5">
 <div class="tui-1"></div>
 <div class="tui-2"></div>
 <div class="tui-3"></div>
</div>

CSS代碼：

<style type="text/css">
 .tui-demo-5 {
 width: 100px;
 height: 100px;
 margin: 50px auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 }
 .tui-demo-5 div {
 width: 25px;
 height: 25px;
 border-radius: 50%;
 background: #2eefe6;
 animation: tui-demo-5 0.4s infinite alternate;
 }
 .tui-demo-5 .tui-1 {
 animation-delay: -0.4s;
 }
 .tui-demo-5 .tui-2 {
 animation-delay: -0.2s;
 }
 .tui-demo-5 .tui-3 {
 animation-delay: 0s;
 }
 @keyframes tui-demo-5 {
 0% {
 opacity: 1;
 transform: scale(1);
 }
 100% {
 opacity: 0.4;
 transform: scale(0.6);
 }
 }
</style>

知識點：

animation：是CSS3的動畫屬性，這里把animation綁定到tui-demo-5元素上，并指定該動畫需要0.4秒完成，infinite則表示無限次播放該動畫，alternate則表示動畫會在奇數次數正常播放，而在偶數次數向后播放，animation-delay則表示動畫在啟動前的延遲間隔。

@keyframes：該規則表示動畫可以逐步從一個CSS樣式改變為另一個CSS樣式。這里0％是動畫開頭，100％是動畫結束。

transform：該屬性應用于2D元素或3D元素的轉換，允許元素發生旋轉，縮放，移動，傾斜等效果。scale定義2D縮放，可以配置縮放大小。opacity定義元素的不透明級別。

最后注意下瀏覽器兼容問題，-webkit-,-ms-或-moz-，有問題可以留言，大家一起學習HTML+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

碼/視頻評論后加前端學習群470593776

javascript課題：原生js拖拽照片墻

知識點：浮動定位布局切換技巧，js鼠標事件，拖拽功能

碰撞檢測，原生js運動框架，2017年就業形勢分析，面試技巧等

源碼：

源碼/視頻評論后加前端學習群470593776

代碼過長，只發部分，大家評論下本文章后

可以加下前端群【470593776】（源碼和視頻）

在線咨詢

上一篇：wangEditor-輕量級富文本+PHP 本地圖片
下一篇：html與css命名規范

您的項目需求

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

整合營銷服務商

HTML+CSS基礎入門開發，經典Loading加載

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

javascript課題：原生js拖拽照片墻

源碼：

代碼過長，只發部分，大家評論下本文章后

可以加下前端群【470593776】（源碼和視頻）

您的項目需求