浠婂ぉ鍦ㄧ兢閲岀湅鍒拌繖鏍蜂竴涓棶棰橈細鏈変竴涓姩鐢伙紝涓€寮€濮嬭繕鍦ㄧ涓€甯э紝鍙湁鐢ㄦ埛鎮仠鏃舵墠杩愯锛岃繍琛屼竴娆″氨鍋滄锛屼竴鐩村仠鐣欏湪鏈€鍚庝竴甯с€備娇鐢–SS鍙互鍋氬埌鍚楋紵鍍忚繖鏍凤細涓€涓潪甯告湁瓒ｇ殑闂锛岀瓟妗堟槸鑲畾鐨勩€傜湅涓€涓嬮噸鐐癸細鍔ㄧ敾鍙繍琛屼竴娆★紝鍦ㄨ繍琛屽墠鐨勭涓€甯э紝杩愯鍚庡湪鏈€鍚庝竴甯с€傚姩鐢荤敱鎮仠椹卞姩锛屽彧鏈夊綋鐢ㄦ埛鎮仠鍦ㄥ厓绱犱笂鏃舵墠浼氭墽琛屽姩鐢汇€俛nimation-fill-mode鎺у埗鍏冪礌姣忎釜闃舵鐨勭姸鎬侀鍏堬紝鍔ㄧ敾鍙繍琛屼竴娆★紝鍦ㄨ繍琛屽墠鐨勭涓€甯э紝杩愯鍚庣殑鏈€鍚庝竴甯с€傝繖鍙槸鍒╃敤浜哸nimation-fill-mode锛氳繖涓ょCSS鍔ㄧ敾銆俛nimation-fill-mode:backwards锛氬姩鐢诲紑濮嬪墠鍏冪礌鐨勬牱寮忎负鍔ㄧ敾杩愯鏃剁殑绗竴甯э紝鍔ㄧ敾缁撴潫鍚庣殑鏍峰紡鎭㈠涓篊SS瑙勫垯animation-fill-mode璁剧疆鐨勬牱寮忥細forwards锛氬厓绱犲湪鍔ㄧ敾寮€濮嬪墠鐨勬牱寮忔槸css瑙勫垯璁剧疆鐨勬牱寮忥紝鍔ㄧ敾缁撴潫鍚庣殑鏍峰紡琛ㄧず涓烘墽琛岃繃绋嬩腑閬囧埌鐨勬渶鍚庝竴涓叧閿抚璁＄畻鐨勫€硷紙鍗冲仠鍦ㄦ渶鍚庝竴甯э級銆俛nimation-fill-mode:涓よ€呭吋椤句簡浠ヤ笂涓ょ妯″紡鐨勭壒鐐癸紝鍙互璁╁姩鐢诲紑濮嬪墠鐨勬牱寮忓湪鍔ㄧ敾杩愯鏃朵负绗竴甯э紝鍔ㄧ敾缁撴潫鍚庡仠鍦ㄦ渶鍚庝竴甯с€傚弽鍚戜娇鐢╝nimation-play-state瀹炵幇hover瑙﹀彂鍔ㄧ敾杩涘害锛屽姩鐢荤敱hover椹卞姩銆傚彧鏈夊綋鐢ㄦ埛灏嗛紶鏍囨偓鍋滃湪鍏冪礌涓婃椂锛屽姩鐢绘墠浼氱户缁€傚彧闇€浣跨敤鍔ㄧ敾鎾斁鐘舵€併€傛垜浠兘鐭ラ亾鍦ㄦ甯告儏鍐典笅锛屽姩鐢诲簲璇ュ浜庤繍琛岀姸鎬侊紝閭ｄ箞濡傛灉鎴戜滑灏嗗姩鐢荤殑榛樿鐘舵€佽缃负鏆傚仠锛屽彧鏈夊綋榧犳爣鐐瑰嚮鎴栬€呮偓鍋滄椂锛岃缃畠鐨刟nimation-play-state:running锛岃繖鏍锋垜浠彲浠ヤ娇鐢ㄦ偓鍋滄帶鍒跺姩鐢荤殑杩涘害锛佸熀浜庝互涓婁袱鐐癸紝鎴戜滑鏉ュ疄鐜颁竴涓湁瓒ｇ殑鎵撳瓧鍔ㄧ敾锛岃鍔ㄧ敾鍙Е鍙戜竴娆★紝骞朵笖鍙湁榧犳爣鎮仠鏃舵墠浼氳繍琛屽姩鐢汇€?p>HoverMe-浣犳槸鐚紒
p{position:relative;瀛椾綋绯诲垪锛氱瓑瀹斤紱瀹藉害锛?6ch锛涘姩鐢伙細杈撳叆3ssteps(15,end)锛涘姩鐢诲～鍏呮ā寮忥細涓よ€咃紱鍔ㄧ敾鎾斁鐘舵€侊細鏆傚仠锛沷verflow:hidden;}p:hover{animation-play-state:running;}p::before{position:absolute;鍐呭锛氣€濃€?瀹藉害锛?px锛涢《閮細0锛涘簳閮細0锛涘彸锛?锛涘姩鐢伙細闂儊.8s绾挎€ф棤闄?}@keyframes闂儊{0%,50%{border-right:4pxsolidtransparent;}50%,100%{border-right:4pxsolid#000;}}@keyframes鎵撳瓧{鏉ヨ嚜{width:11ch;}鍒皗瀹藉害锛?6ch锛泒}榛樿浼氭樉绀鸿繖鏍蜂竴涓晫闈細鎺ヤ笅鏉ワ紝鎴戜滑鎶婇紶鏍囨斁鍦ㄤ笂闈㈢湅鐪嬩細鍙戠敓浠€涔堬細鏈夎叮锛屽畬缇庡疄鐜颁笂闈㈡彁鍒扮殑闇€姹傗€斺€斿姩鐢荤敱鎮仠椹卞姩锛屽彧鏈夊綋鐢ㄦ埛鐐瑰嚮鏃讹紝鍔ㄧ敾鎵嶄細杩涜鎮仠鍦ㄥ厓绱犱笂銆傚綋鐒惰繖閲屼篃鐢ㄥ埌浜嗕竴浜涘皬鎶€宸э紝涓€璧锋潵璇存槑涓€涓嬶細鎵撳瓧鍔ㄧ敾浣跨敤鐨勬槸閫愬抚鍔ㄧ敾鑰屼笉鏄ˉ闂村姩鐢伙紝涓昏鏄埄鐢ㄤ簡CSS鍔ㄧ敾鐨剆tep-timing-functionstepeasing鍔熻兘锛屽嵆鍦╟odesteps(15,end)ch鏄疌SS涓殑涓€涓浉瀵瑰崟浣嶏紝琛ㄧず鍏冪礌浣跨敤鐨勫瓧浣撲腑瀛椾綋鈥?鈥濈殑瀹藉害銆俧ont-family:monospace浠ｈ〃绛夊瀛椾綋锛屾瘡涓瓧绗﹀崰鐢ㄧ殑瀹藉害鏄竴鏍风殑锛屽洜涓烘垜浠敤26ch鏉ュ厖褰?p>鍏冪礌鐨勫搴︼紝鑰屾枃鏈琀overMe-Youareapig姝ｅソ鏄?6涓瓧绗﹀寘鎷┖鏍硷紝鑰?6ch浠呰〃绀烘鏂囨湰鐨勯暱搴︺€備竴寮€濮嬫樉绀虹殑鏂囨湰Hoverme-绠椾笂绌烘牸锛屽搴︿负11ch锛屾渶鍚庨渶瑕佹樉绀烘暣涓枃鏈搴︿负26ch锛屼腑闂撮渶瑕?5姝ョ殑閫愬抚鍔ㄧ敾锛屼互鍙婅繖閲岀殑鍏冪礌鍙槸鍜屼唬鐮佷竴涓€瀵瑰簲鐨勩€傞殢鐫€animation-fill-mode:both鍜宎nimation-play-state:paused鐨勫紩鍏ワ紝鎴戜滑灏卞畬缇庣殑瀹炵幇浜嗚繖鏍蜂竴涓潪甯告湁瓒ｇ殑鎵撳瓧鍔ㄧ敾銆傚畬鏁寸殑浠ｇ爜鍙互鐐硅繖閲孋odePenDemo鈥斺€旀偓鍋滆繍琛屼竴娆″姩鐢诲鏋滀綘鎯冲CSS鍔ㄧ敾鏈夋洿娣卞叆缁嗚嚧鐨勪簡瑙ｏ紝鍙互鐪嬫垜鐨勮繖绡囨枃绔狅紝閲岄潰鏈夐潪甯歌缁嗙殑璇存槑everyattributeofanimationExplanation:娣卞叆璁茶ВCSS鍔ㄧ敾缁堜簬OK浜嗐€傛湰鏂囧埌姝ょ粨鏉熴€傚笇鏈涜繖绡囨枃绔犲浣犳湁鎵€甯姪锛氾級濡傛灉浣犳兂鑾峰彇鏈€鏈夎叮鐨凜SS璧勬枡锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈杞朵簨馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屼笉鏂洿鏂般€傛杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>