鍦ㄥ悇绉嶇煭瑙嗛鐣岄潰涓婏紝鎴戜滑缁忓父浼氱湅鍒拌繖鏍风殑like鍔ㄧ敾锛氶潪甯告湁瓒ｏ紝鏈夎叮鐨勪氦浜掍細璁╃敤鎴锋洿鎰挎剰浜掑姩銆傞偅涔堬紝鏈夋病鏈夊彲鑳界敤绾疌SS瀹炵幇杩欎箞鏈夎叮鐨刲ike鍔ㄧ敾鍛紵褰撶劧鏈夊繀瑕併€傚湪杩欑瘒鏂囩珷涓紝鎴戜滑灏嗗阀濡欏湴浣跨敤transition鏉ヤ粎浣跨敤CSS鏉ュ畬鎴愯繖鏍蜂竴涓珫璧峰ぇ鎷囨寚鐨勫姩鐢汇€傚鏋滀娇鐢ㄧ函CSS瀹炵幇鏁村鍔ㄧ敾锛屽垯鍙互瀹炵幇涓嶅悓琛ㄦ儏鐨勪笉鏂笂鍗囥€傛垜浠鍏堣瀹炵幇涓€涓棤闄愬惊鐜殑鍔ㄧ敾锛屾湁澶ч噺涓嶅悓鐨勮〃鎯呭悜涓婇銆傚儚杩欐牱锛氳繖涓暣浣撹繕鏄瘮杈冨鏄撳疄鐜扮殑銆傛牳蹇冨師鐞嗘槸鍚屼竴涓姩鐢伙紝鍦ㄤ竴瀹氳寖鍥村唴璁剧疆涓嶅悓鐨則ransition-duration銆乼ransition-dalay銆乺otationangle銆傛垜浠鍏堥渶瑕佸疄鐜板涓〃杈惧紡锛屼竴涓狣OM鏍囩鏀句竴涓殢鏈虹殑琛ㄨ揪寮忋€傛垜浠彲浠ヤ竴涓竴涓墜鍔ㄦ坊鍔狅細馃榾鉂わ笍馃憦//...闅忔満璁剧疆鏄痙ifferent涓€鍏辨湁50涓〃鎯?li>...褰撶劧鎴戜釜浜鸿寰楄繖鏍峰お楹荤儲浜嗐€備範鎯娇鐢⊿ASS鐨刲oop鍑芥暟鍜宺andom鍑芥暟锛屽埄鐢ㄤ吉鍏冪礌鐨勫唴瀹归殢鏈虹敓鎴愪笉鍚岀殑琛ㄨ揪寮忋€傚儚杩欐牱锛?ulclass="g-wrap">//...鎬诲叡50涓┖鏍囩$琛ㄨ揪鏂瑰紡锛氣€滒煒€鈥濄€佲€滒煠ｂ€濄€佲€溾潳锔忊€濄€佲€滒煒烩€濄€佲€滒煈忊€濄€佲€滒煠樷€濄€佲€滒煠♀€濄€佲€滒煠椻€濄€佲€滒煈嶐煆尖€濄€佲€滒煇€濄€佲€滒煄堚€濄€佲€滒煉曗€?"馃挀","馃挌";.g-wrap{浣嶇疆锛氱浉瀵?瀹藉害锛?0px锛沨eight:50px;}@for$i浠?鍒?1{li:nth-child(#{$i}){position:absolute;椤堕儴锛?锛涘乏锛?锛涘搴︼細50px锛涢珮搴︼細50px锛?::before{content:nth($expression,random(length($expression)));浣嶇疆锛氱粷瀵癸紱瀛椾綋澶у皬锛?0px锛涜繖鏍锋垜浠氨鍙互寰楀埌50涓彔鍔犵殑琛ㄦ儏锛氬洜涓洪€忔槑搴︿负1锛屾墍浠ュ彧鑳界湅鍒版渶涓婇潰鐨勫嚑涓〃鎯咃紝浣嗗疄闄呬笂杩欓噷鍙犲姞浜?0涓笉鍚岀殑琛ㄦ儏銆傝繖閲岀殑鏍稿績鏄痗ontent:nth($expression,random(length($expression)))锛屾垜浠娇鐢⊿ASS鐨剅andom銆乴ength鍜宯th鏂规硶灏?expression鍒楄〃涓殑琛ㄨ揪寮忛殢鏈烘坊鍔犲埌content涓殑涓嶅悓li涓湪浼厓绱犱箣鍓嶃€傛帴涓嬫潵锛屾垜浠渶瑕佷负瀹冧滑鍒朵綔鍔ㄧ敾銆傝繖寰堢畝鍗曪紝鍙渶娣诲姞涓€涓棤闄愬彉鎹細translate()animation:@for$ifrom1to51{li:nth-child(#{$i}){animation:move3000msinfinitelinear;}}@keyframes绉诲姩{100%{transform:translate(0,-250px);}}鏁堟灉濡備笅锛歄K锛岀敱浜?0涓厓绱犲爢鍙犲湪涓€璧凤紝鎴戜滑闇€瑕佸尯鍒嗗姩鐢伙紝鎴戜滑缁欏畠浠坊鍔犻殢鏈虹殑鍔ㄧ敾鎸佺画鏃堕棿锛屽苟涓旓紝鍒嗛厤涓嶅悓鐨勮礋transition-delay鍊硷細@for$ifrom1to51{li:nth-child(#{$i}){鍔ㄧ敾锛氱Щ鍔?{random()*2500+1500}ms鏃犻檺#{random()*4000/-1000}s绾挎€э紱}}@keyframes绉诲姩{100%{transform:translate(0,-250px);}}鏁堟灉濡備笅锛氭晥鏋滃緢鎺ヨ繎鎴戜滑鎯宠鐨勶紒杩欓噷鏈夌偣璺宠穬锛岄渶瑕佺悊瑙ove#{random()*2500+1500}msinfinite#{random()*4000/-1000}slinear杩欓噷鏈変竴澶ф浠ｇ爜锛?{random()*2500+1500}ms鐢熸垚涓€涓?500ms~4000ms涔嬮棿鐨勯殢鏈烘暟锛岃〃绀哄姩鐢荤殑鎸佺画鏃堕棿#{random()*4000/-1000}s鐢熸垚涓€涓?4000ms~0s涔嬮棿鐨勯殢鏈烘暟锛岃〃绀鸿礋鍔ㄧ敾寤惰繜锛岃繖鏍峰仛鐨勭洰鐨勬槸璁╁姩鐢绘彁鍓嶈繘琛屻€傚鏋滀綘杩樹笉鏄庣櫧negativetransition-delay鐨勪綔鐢紝鍙互鐪嬫垜鐨勬枃绔犫€斺€擟SS鍔ㄧ敾娣卞叆浠嬬粛銆傚畠浠嶇劧涓嶅闅忔満銆傝鎴戜滑闅忔満娣诲姞涓€涓洿灏忕殑鏃嬭浆瑙掑害锛岃鏁翠綋鏁堟灉鏇村姞闅忔満锛欯for$ifrom1to51{li:nth-child(#{$i}){transform:rotate(#{random()*80-40}搴︼級锛涘姩鐢伙細绉诲姩#{random()*2500+1500}ms鏃犻檺#{random()*4000/-1000}s绾挎€э紱}}@keyframesmove{100%{transform:rotate(0)translate(0,-250px);}}杩欓噷transform:rotate(#{random()*80-40}deg)鐢ㄤ簬闅忔満鐢熸垚-鈥嬧€?0deg~40deg鐨勯殢鏈烘暟锛岀敓鎴愰殢鏈鸿搴︺€傝嚦姝わ紝鎴戜滑灏卞緱鍒颁簡杩欐牱涓€涓晥鏋滐細浣跨敤transition灏哾ecay鍙樻垚magic鏉ュ埌杩欓噷銆傚緢澶氬悓瀛﹀彲鑳借繕涓嶆槑鐧斤紝鏄庢槑鐐硅禐涓€娆＄敓鎴愪竴涓〃鎯咃紝涓轰粈涔堣繕瑕佷竴娆＄敓鎴愰偅涔堝涓嶆柇绉诲姩鐨勮〃鎯呮晥鏋滃憿锛熻繖鏄洜涓猴紝CSS涓嶈兘鐩存帴鐐瑰嚮涓€娆＄敓鎴愯〃鎯咃紝鎴戜滑闇€瑕佹崲涓€绉嶆€濊矾銆傚鏋滆繖浜涜〃鎯呬竴鐩村湪鍔紝浣嗘槸娌℃湁琚偣鍑荤殑鏃跺€欙紝瀹冧滑鐨勪笉閫忔槑搴︿负0锛屾垜浠鍋氱殑灏辨槸璁╁畠浠湪鎴戜滑鐐瑰嚮鐨勬椂鍊欎粠opacity:0鍙樻垚opacity:1銆備负姝わ紝鎴戜滑闇€瑕佸阀濡欏湴浣跨敤杩囨浮銆傛垜浠互涓€涓〃杈惧紡涓轰緥锛氬畠鐨勯粯璁ら€忔槑搴︽槸opacity:0.1鐐瑰嚮鏃讹紝瀹冪殑閫忔槑搴︾灛闂村彉涓簅pacity:1锛岀劧鍚庨€氳繃transition-delay淇濇寔opacity:1鐨勭姸鎬佷竴娈垫椂闂达紝鐒跺悗閫愭笎娑堝け骞跺彉鍥瀘pacity:0.1鐪嬭捣鏉ユ湁鐐瑰鏉傦紝浠ｇ爜浼氭洿瀹规槗鐞嗚В锛歭i{opacity:.1;transition:1.5sopacity0.8s;}li:active{opacity:1;transition:.1sopacity;}鏁堟灉濡備笅锛氫竴瀹氳鐪嬫噦涓婇潰鐨勪唬鐮侊紒宸у鍦板埄鐢ㄦ甯哥姸鎬佸拰娲诲姩鐘舵€佺殑杩囨浮鍙樺寲锛屾垜浠疄鐜颁簡杩欎釜宸у鐨勭偣鍑绘晥鏋溿€傚鏋滄垜浠皢鍒濆鐨刼pacity:0.1鏇存敼涓簅pacity:0浼氭€庝箞鏍凤紵浼氭槸杩欐牱鐨勶細OK锛屾垜浠妸涓婇潰涓や釜鍔ㄧ敾缁撳悎璧锋潵锛氭垜浠妸鎵€鏈夎〃鎯呯殑榛樿閫忔槑搴﹂兘鏀规垚0.1銆傜偣鍑绘椂锛岄€忔槑搴﹀彉涓?銆傞€忔槑搴︿細鏆傛椂淇濇寔1锛岀劧鍚庨€愭笎娑堝け銆備唬鐮佸涓嬶細@for$ifrom1to51{li:nth-child(#{$i}){position:absolute;椤堕儴锛?锛涘乏锛?锛涘搴︼細50px锛涢珮搴︼細50px锛涘彉鎹細鏃嬭浆锛?{random()*80-40}deg锛夛紱鍔ㄧ敾锛氱Щ鍔?{random()*2500+1500}ms鏃犻檺#{random()*4000/-1000}s绾挎€э紱涓嶉€忔槑搴︼細.1锛涜繃娓★細1.5s涓嶉€忔槑搴?8s锛?::before{鍐呭:nth($expression,random(length($expression)));浣嶇疆锛氱粷瀵癸紱}}li:active{涓嶉€忔槑搴?1;杩囨浮锛?1s涓嶉€忔槑搴︼紱}}@keyframes绉诲姩{100%{鍙樻崲锛氭棆杞紙0锛夊钩绉伙紙0锛?250px锛夛紱}}鏁堟灉濡備笅锛氬挦锛屾湁杩欎箞鏈夎叮鍚楋紒濂戒簡锛屾渶鍚庝竴姝ワ紝鎴戜滑鐢ㄤ竴涓偣鍑绘寜閽潵寮曞鐢ㄦ埛鐐瑰嚮锛屽苟缁欏嚭鐐瑰嚮鍙嶉銆傛瘡鐐瑰嚮涓€娆★紝鐐硅禐鎸夐挳灏变細鏀惧ぇ1.1鍊嶃€傚悓鏃讹紝鎴戜滑灏嗛粯璁よ〃鎯呯殑閫忔槑搴︿粠opacity:0.1褰诲簳鏇存敼涓簅pacity:0銆傝繖鏍凤紝鏁翠釜鍔ㄧ敾鐨勫畬鏁存牳蹇冧唬鐮侊細//...a涓€鍏?0涓┖鏍糡ag$expression:"馃榾","馃","鉂わ笍","馃樆","馃憦","馃","馃ぁ","馃","馃憤馃徏","馃惍","馃巿","馃挄","馃挀","馃挌";.g-wrap{浣嶇疆锛氱浉瀵?瀹藉害锛?0px锛涢珮搴︼細50px锛?::before{鍐呭锛氣€滒煈嶐煆尖€濓紱浣嶇疆锛氱粷瀵癸紱瀹藉害锛?0px锛涢珮搴︼細50px锛涜繃娓★細0.1s锛泒&:active::before{鍙樻崲锛氭瘮渚嬶紙1.1锛夛紱}}@for$i浠?鍒?1{li:nth-child(#{$i}){position:absolute;瀹藉害锛?0px锛涢珮搴︼細50px锛涘彉鎹細鏃嬭浆锛?{random()*80-40}deg锛夛紱鍔ㄧ敾锛氱Щ鍔?{random()*2500+1500}ms鏃犻檺#{random()*4000/-1000}scubic-bezier(.46,.53,.51,.62);涓嶉€忔槑搴︼細0锛涜繃娓★細1.5s涓嶉€忔槑搴?8s锛?::before{content:nth($expression,random(length($expression)));浣嶇疆锛氱粷瀵癸紱}}li:active{transition:.1s涓嶉€忔槑搴?涓嶉€忔槑搴︼細1锛侀噸瑕佺殑;}}@keyframes绉诲姩{100%{鍙樻崲锛氭棆杞紙0锛夊钩绉伙紙0锛?250px锛夛紱}}杩欓噷锛岄渶瑕佹敞鎰忕殑鏄偣璧炴寜閽槸閫氳繃鐖跺厓绱犵殑浼厓绱?g-wrap瀹炵幇鐨勶紝杩欐牱鍋氱殑濂藉鏄瓙鍏冪礌li鐨?active鐐瑰嚮浜嬩欢鍙互鍐掓场鍒扮埗鍏冪礌鍏冪礌锛岃繖鏍峰瓙鍏冪礌姣忔琚偣鍑伙紝鎴戜滑灏卞彲浠ユ斁澶т竴娆＄偣璧炴寜閽紝瀹炵幇鐐瑰嚮鍙嶉锛涚◢寰慨鏀圭紦鍔ㄥ姛鑳斤紝浣挎暣浣撴晥鏋滄洿鍔犲潎琛″悎鐞嗐€傝繖鏍凤紝鎴戜滑灏卞緱鍒颁簡鏍囬鍥剧墖鐨勫垵濮嬫晥鏋滐紝浣跨敤绾疌SS瀹炵幇like鍔ㄧ敾锛氬畬鏁翠唬鐮侊紝鍙互鐐瑰嚮杩欓噷锛欳odePenDemo--LikeAnimationALittleFlaw褰撶劧杩樻湁鐐瑰皬闂杩欎釜瑙ｅ喅鏂规銆傚嵆鐐瑰嚮鐜囪繃蹇紝鏃犳硶瀹炵幇鐐瑰嚮鐢熸垚琛ㄦ儏銆傝繖鏄洜涓篊SS瑙ｅ喅鏂规鐨勬湰璐ㄦ槸鐐瑰嚮閫忔槑琛ㄨ揪寮忎娇鍏朵笉閫忔槑銆傚鏋滅偣鍑婚€熷害澶揩锛屼細瀵艰嚧鍚屼竴涓厓绱犺鐐瑰嚮涓ゆ鎴栧娆★紝浠庤€屾棤娉曞疄鐜颁竴娆＄偣鍑荤敓鎴愪竴涓〃杈惧紡銆傛墍浠ヤ笂闈唬鐮佷腑淇敼easingcubic-bezier(.46,.53,.51,.62)鐨勭洰鐨勪篃鏄负浜嗚鍏冪礌鍔ㄧ敾鍦ㄥ墠鏈熺Щ鍔ㄧ殑鏇村揩涓€浜涳紝鍙互甯姪閫傚簲鏇村揩鐨勭偣鍑荤巼.涓嶄粎鏄偣鍑绘寜閽紝鐐瑰嚮鎸夐挳椤堕儴涔熷彲浠ユ樉绀烘晥鏋滐紝鎵€浠ュ緢瀹规槗鐞嗚В銆傜敱浜庢湰璐ㄦ槸鐪肩僵锛屾墍浠ョ偣鍑讳笂鏂圭殑鎸夐挳锛屽彧瑕佹槸鍏冪礌鐨勭Щ鍔ㄨ矾寰勶紝鍏冪礌涔熶細鍑虹幇銆傝繖涓篃鍙互閫氳繃鍦ㄦ寜閽笂闈㈠彔鍔犱竴灞傞€忔槑鍏冪礌锛岄€氳繃灞傜骇鍏崇郴灞忚斀鐐瑰嚮浜嬩欢鏉ヨВ鍐炽€傝〃杈惧紡鐨勯殢鏈烘€у彧鏄吉闅忔満銆備娇鐢⊿ASS鐨勯殢鏈烘柟妗堢紪璇戝悗涓嶄細浜х敓闅忔満鏁堟灉銆傛墍浠ワ紝杩欓噷鍙兘鏄吉闅忔満锛屾牴鎹瓺OM鐨勪釜鏁帮紝DOM瓒婂锛屾暣浣撻殢鏈烘晥鏋滆秺濂姐€傚熀鏈笂50涓狣OM缁扮话鏈変綑銆侰SS鐗堢被浼肩殑鏁堟灉灏辨槸鍗曟満鐗堜笉鑳借澶氫汉閾炬帴锛岃繖鍙兘鏄奖鍝嶅畠鑳藉惁鐪熸浣跨敤鐨勬渶鍏抽敭鍥犵礌銆備笉杩囨€昏€岃█涔嬶紝绾疌SS瀹炵幇鐨勬柟妗堟暣浣撴晥鏋滆繕鏄笉閿欑殑銆傛渶鍚庯紝鏈枃鍒版缁撴潫銆傚笇鏈涜繖绡囨枃绔犲浣犳湁鎵€甯姪锛氾級鏇村绮惧僵鐨凜SS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂颁腑銆傛杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
