使用CSS实现动态行加载动画
时间：2023-03-27 23:53:49
HTML
涓€缇ゅ皬浼欎即闂垜濡備綍浣跨敤CSS瀹炵幇濡備笅鐨凩oading鏁堟灉锛氳繖鏄釜寰堟湁鎰忔€濈殑闂銆傛垜浠煡閬撲娇鐢–SS锛屾垜浠彲浠ラ潪甯歌交鏉剧殑瀹炵幇杩欐牱鐨勫姩鐢绘晥鏋滐細
div{width:100px;楂樺害锛?00px锛涜竟鐣屽崐寰勶細50%锛涜竟妗嗭細2px瀹炲績閫忔槑锛沚order-top:2pxsolid#000;宸﹁竟妗嗭細2pxsolid#000锛沘nimation:rotate3sinfinitelinear;}@keyframesrotate{100%{transform:rotate(360deg);}}鍔ㄧ敾濡備笅锛歸iththerequiredlineloading涓庡姩鐢荤浉姣旓紝涓婅堪鍔ㄧ敾缂哄皯涓€涓牳蹇冪偣锛氬湪鏃嬭浆杩囩▼涓紝绾跨殑闀垮害浼氬彂鐢熷彉鍖栥€傚洜姝わ紝杩欓噷鐨勯毦鐐瑰氨鍙樻垚浜嗗浣曞姩鎬佸疄鐜板渾寮ф鐨勯暱搴﹀彉鍖栵紵瑙ｅ喅杩欎釜闂锛屽熀鏈笂灏辫В鍐充簡涓婇潰鎻愬埌鐨勭嚎鍙樻崲Loading鍔ㄧ敾銆傛湰鏂囧皢浠嬬粛CSS涓嚑涓湁瓒ｇ殑鍙兘鍔ㄦ€佹敼鍙樺姬绾块暱搴︾殑鏂规硶锛氭柟娉曚竴锛氫娇鐢ㄨ挋鐗堝疄鐜扮涓€绉嶆柟娉曪紝涔熸槸姣旇緝瀹规槗鎯冲埌鐨勶紝浣跨敤钂欑増鏉ュ疄鐜般€傛垜浠疄鐜颁袱鏉″崐鍦嗙嚎锛屼竴鏉℃槸瀹為檯鍙互鐪嬪埌鐨勯鑹诧紝涓€鏉″拰鑳屾櫙棰滆壊涓€鏍凤紝姣旇緝绮楃殑涓€鏉″崐鍦嗙嚎銆傚綋涓ゆ潯绾跨殑閫熷害涓嶄竴鑷存椂锛屾垜浠彲浠ョ洿瑙傚湴鐪嬪埌锛岃繕鍙互鐪嬪埌鍔ㄦ€佸彉鍖栫殑寮х嚎銆傜湅绀烘剰鍥撅紝涓€鐪煎氨鏄庣櫧浜嗭細鎴戜滑鎶婁笂闈㈢殑绾㈢嚎鎹㈡垚鐧藉簳锛屾暣浣撶殑鍔ㄧ敾鏁堟灉寰堢浉浼笺€備吉浠ｇ爜濡備笅锛?div>
div{width:200px;height:200px;}div::before{position:absolute;鍐呭锛氣€濃€?椤堕儴锛?px锛涘乏锛?px锛涘彸锛?px锛涘簳閮細0px锛涜竟鐣屽崐寰勶細50%锛涜竟妗嗭細3px瀹炲績閫忔槑锛沚order-top:3pxsolid#000;宸﹁竟妗嗭細3pxsolid#000锛涘姩鐢伙細鏃嬭浆3绉掓棤闄愮紦鍑猴紱}div::after{浣嶇疆锛氱粷瀵癸紱鍐呭锛氣€濃€?椤堕儴锛?2px锛涘乏锛?2px锛涘彸锛?2px锛涘簳閮細-2px锛涜竟鐣屽崐寰勶細50%锛涜竟妗嗭細7px瀹炲績閫忔槑锛沚order-bottom:7pxsolid#fff;border-right:7pxsolid#fff;鍔ㄧ敾锛氭棆杞?s鏃犻檺缂撳叆缂撳嚭锛汙keyframes鏃嬭浆{100%{鍙樻崲锛氭棆杞紙0搴︼級锛泒}鏍稿績鏄疄鐜颁袱鏉″崐鍦嗙嚎锛屼竴鏉￠粦鑹诧紝涓€鏉¤儗鏅壊锛屼袱鏉＄嚎浠ヤ笉鍚岀殑閫熷害绉诲姩锛堥€氳繃鍔ㄧ敾鏃堕棿鍜岀紦鍔ㄦ潵鎺у埗锛夛紝鏁堟灉濡備笅锛氬畬鏁翠唬鐮佸彲浠ユ壂涓€鎵?-CodePenDemo--LinearLoading涓婅堪鏂规鏈€澶х殑涓や釜闂鏄細濡傛灉鑳屾櫙鑹蹭笉鏄函鑹诧紝浼氭毚闇插嚭鏉ワ紱濡傛灉瑕佹眰鑳芥樉绀虹殑绾挎闀垮害澶т簬鍗婂湀锛屽垯涓嶈兘鍩轰簬姝わ紝鎴戜滑鍙兘鍙﹁緹韫婂緞銆傛柟娉曚簩锛氬€熷姪SVG鐨剆troke-*鑳藉姏鍦ㄤ箣鍓嶇殑寰堝鏂囩珷涓紝鎴戜滑閮芥彁鍒颁簡鍊熷姪CSS鍜孲VG锛屾垜浠彲浠ュ疄鐜板悇绉嶇畝鍗曟垨澶嶆潅鐨勭嚎鏉″姩鐢伙紝姣斿绠€鍗曠殑锛氭垨鑰呰嚜瀹氫箟澶嶆潅璺緞鐨勫鏉傜嚎鏉″姩鐢伙細>濡傛灉浣犲鐢–SS/SVG瀹炵幇绾挎潯鍔ㄧ敾鎰熷叴瓒ｏ紝浣嗗張涓嶆槸寰堜簡瑙ｏ紝鍙互鐪嬫垜鐨勬枃绔犫€斺€斻€怶eb鍔ㄧ敾銆慡VG绾挎潯鍔ㄧ敾鍏ラ棬灏卞湪杩欓噷锛屾垜浠彧闇€瑕佷竴涓畝鍗曠殑SVG鏍囩
锛岄€氳繃瀹冪殑CSS鏍峰紡stroke-dasharray鍜宻troke-dashoffset鍙互杞绘澗瀹炵幇涓婇潰鐨勬晥鏋滐細.circular{瀹藉害锛?00px锛涢珮搴︼細100px锛沘nimation:rotate2slinearinfinite;}.path{stroke-dasharray:1,200;绗旂敾鍋忕Щ閲忥細0锛涜绋嬶細#000锛涘姩鐢伙細dash1.5sease-in-outinfinite}@keyframesrotate{100%{transform:rotate(360deg);}}@keyframesdash{0%{stroke-dasharray:1,200;绗旂敾鍋忕Щ閲忥細0锛泒50%{涓-dasharray:89,200;绗旂敾鍋忕Щ閲忥細-35px锛涚瑪鐢诲亸绉婚噺锛?124px锛泒}绠€瑕佽鏄庯細stroke锛氱被浼间簬css涓殑border-color锛屼负svg鍥惧舰璁剧疆杈规棰滆壊锛泂troke-dasharray锛氬彇鍊兼槸涓€缁勬暟缁勶紝娌℃湁涓婇檺锛屾瘡涓暟瀛楃敤琛屽拰绌烘牸浜ゆ浛琛ㄧずstroke-dashoffset锛氫粠鐮存姌鍙锋ā寮忓埌璺緞璧风偣鐨勮窛绂汇€傛垜浠娇鐢╯troke-dasharray灏嗗師濮嬬殑瀹屾暣绾挎潯鍒囧壊鎴愬娈点€傚亣璁炬槸stroke-dasharray:10锛?0琛ㄧず杩欐牱涓€涓浘锛氱涓€涓?0琛ㄧず绾挎闀垮害锛岀浜屼釜10琛ㄧず涓ゆ潯鍙绾挎涔嬮棿鐨勭┖闅欍€傚疄闄呬唬鐮佷腑鐨剆troke-dasharray:1,200琛ㄧず涓ゆ潯1px鐨勭嚎娈典箣闂撮棿闅?00px銆傜敱浜庣洿寰勪负40px鐨勫渾鐨勫懆闀夸负40*蟺鈮?25.6px锛屽皬浜?00锛屽疄闄呭浘濡備笅鍥俱€傚彧鏈変竴鐐癸細鍚岀悊锛宻troke-dasharray:89,200鐨勬剰鎬濇槸锛氶€氳繃鍔ㄧ敾锛岃绾挎鍦ㄨ繖涓ょ鐘舵€佷箣闂磋繘琛宼ween銆俿troke-dashoffset鐨勪綔鐢ㄦ槸灏嗙嚎娈靛線鍓嶆帹锛岄厤鍚堢埗瀹瑰櫒鐨則ransform:rotate()鏃嬭浆鍔ㄧ敾锛岃繖鏍疯瑙夋晥鏋滃氨鏄嚎娈典竴鐩村湪涓€涓柟鍚戞棆杞€傜粨鏋滃涓嬶細瀹屾暣浠ｇ爜鍙互鐐硅繖閲岋細CodePenDemo--LinearloadingOK锛屾湁鍚屽浼氳锛屾垜涓嶆兂寮曞叆SVG鏍囩锛屾垜鍙兂鐢ㄧ函CSS鏂规銆傚湪杩欓噷锛岃繕鏈変竴涓娇鐢–SS@property鐨勭函CSS瑙ｅ喅鏂规銆傛柟娉曚笁锛氫娇鐢–SS@property浣縞onic-gradient绉诲姩杩欓噷鎴戜滑闇€瑕佷娇鐢–SS@property鐨勮兘鍔涙潵绉诲姩鏃犳硶鍔ㄧ敾鐨勮搴︽笎鍙樸€傝繖涓柟娉曪紝鎴戝湪浠嬬粛CSS@property鐨勬枃绔犱腑涔熸彁鍒拌繃鈥斺€擟SS@property锛岃涓嶅彲鑳藉彉鎴愬彲鑳介€氬父鏉ヨ锛屾笎鍙樻槸涓嶈兘鍋氬姩鐢荤殑锛屽涓嬪浘锛?div> 銆傛甯竰瀹藉害锛?00px;楂樺害锛?00px锛涜竟鐣屽崐寰勶細50%锛涜儗鏅細鍦嗛敟娓愬彉锛堥粍缁胯壊锛岄粍缁胯壊25%锛岄€忔槑25%锛岄€忔槑100%锛夛紱杩囨浮锛氳儗鏅?0鈥嬧€?ms锛?:hover{background:conic-gradient(yellowgreen,yellowgreen60%,transparent60.1%,transparent100%);}}浼氬緱鍒拌繖鏍风殑鏁堟灉锛屽洜涓篶onic-gradient涓嶆敮鎸佽繃娓″姩鐢伙紝寰楀埌鐨勬槸鐩存帴涓€甯у埌鍙︿竴甯у彉浣擄細Ok锛屼娇鐢–SS@property鑷畾涔夊彉閲忚繘琛屽彉鎹細@property--per{syntax:'<鐧惧垎姣?';缁ф壙锛氬亣鐨勶紱鍒濆鍊硷細25%锛泒div{鑳屾櫙锛氬渾閿ユ搴︼紙榛勭豢鑹诧紝榛勭豢鑹瞯ar锛?-per锛夛紝閫忔槑var锛?-per锛夛紝閫忔槑100%锛夛紱杩囨浮锛?-姣?00姣绾挎€э紱&:hover{--per:60%;}}鐪嬬湅鍙樻崲鍚庣殑鏁堟灉锛氬湪杩欓噷锛屾垜浠彲浠ヨ娓愬彉鍔ㄦ€佺Щ鍔紝璧嬩簣瀹冨姩鐢荤殑鑳藉姏銆傛垜浠彧闇€瑕佸啀娆″紩鍏ラ伄缃╋紝灏嗕腑闂撮儴鍒嗗壀鎺夛紝灏卞彲浠ュ疄鐜颁笂闈竴琛岀殑鍔犺浇鍔ㄧ敾銆備吉浠ｇ爜濡備笅锛?div>
