鍏堢湅绠€鍗曠殑锛屽弬鑰價eact瀹樼綉鐨凩ogo灞曠ず鏁堟灉銆傛暣涓疄鐜拌繃绋嬩篃闈炲父绠€鍗曘€傛瘯绔熻繖涓嶆槸浠€涔堝鏉傜殑鍥惧舰锛屽悓鏃跺湪缁樺埗杩囩▼涓厠闅嗗嚭鏉ヤ篃涓嶆槸瀹屽叏100%涓€妯′竴鏍凤紝鍙槸鐪嬭捣鏉ュ舰鐘剁浉浼艰€屽凡銆傛瘮濡備互涓嬪嚑鐐瑰鐞嗚捣鏉ユ瘮杈冮殢鎰忥細妞渾鐨勬棆杞搴︼紱涓績鐐圭殑澶у皬锛涙瘡涓き鍦嗙殑澶у皬锛汻eactlogo涓殑涓変釜妞渾閮ㄥ垎鍦ㄥ紑濮嬬粯鍒舵椂鍋囪澶у皬鐩稿悓锛岄偅涔堝彧瑕佺粯鍒舵按骞虫き鍦嗗悗锛屼娇鐢?:before鍜?:after杩涜鏃嬭浆鍜屾敼鍙樿搴﹀嵆鍙€傛瀯鎬濆叧閿儴鍒嗭紝鐒跺悗寮€濮嬫墜鍐機SS浠ｇ爜銆?react{浣嶇疆锛氱浉瀵癸紱瀹藉害锛?50px锛涢珮搴︼細250px锛沜olor:rgb(1,216,255);}閫氳繃棰滆壊閫夋嫨鍣ㄨ幏鍙朢eactLogo鍥剧墖鐨勯鑹插€硷紝鐒跺悗缁欏鍥撮檺瀹氫竴涓楂樸€傗湉锔忚繖閲岃娉ㄦ剰涓€鐐癸紝涓昏鏄皢棰滆壊鍊煎啓鍏olor銆傪煍朇SS涓湁涓€涓猚urrentColor灞炴€у€硷紝鍙互鐩存帴鑾峰彇褰撳墠缁ф壙鐨勯鑹插€硷紝color鏄彲缁ф壙鐨勶紝濡傛灉涓埆灞炴€т笉鍐欓鑹插€硷紝浼氱洿鎺ョ户鎵縞olor鐨勫€笺€傛墍浠ワ紝鎴戜滑鍦ㄧ埗鍏冪礌涓婂啓棰滆壊鍊肩殑鏃跺€欙紝鍚庨潰寰堝鍦版柟鐨勯鑹插€奸兘鍙互鐪佺暐銆傜劧鍚庣敾鍑烘き鍦嗛儴鍒嗐€?logo,.logo::after,.logo::before{position:absolute;椤堕儴锛?0%锛涘乏锛?锛涘搴︼細250px锛涢珮搴︼細100px锛涜竟妗嗭細10px瀹炲績锛涘昂瀵革細杈规妗嗭紱鍙樻崲锛氱炕璇慪(-50%)锛泎-index:1;}娉ㄦ剰锛氳繖閲岀殑楂樺害鏄洰娴嬬寽娴嬬殑楂樺害鍊硷紝瀹藉害鏄负浜嗗～婊″鍣紝鎵€浠ヤ笉浣跨敤100%浣滀负瀹藉害鍊硷紝鍥犱负杩欓噷杩樻湁涓や釜浼厓绱?:涔嬪悗鍜?:涔嬪墠銆傚鏋滀娇鐢?00%锛岃繖涓や釜浼厓绱犵殑瀹藉害浼氭瘮妯悜鐨勫皬锛屽洜涓轰吉鍏冪礌鏄?logo鐨勫瓙鍏冪礌銆傚洜涓轰娇鐢ㄤ簡缁濆瀹氫綅锛屾墍浠ユ鏃堕〉闈笂鍙互鐪嬪埌鈥滀竴涓€濇き鍦嗐€傜幇鍦ㄦ槸鏃跺€欐棆杞吉鍏冪礌浜嗐€?logo::after,.logo::before{鍐呭锛?';宸︼細-12px锛泃ransform:rotate(58deg)translate3d(-50px,-25px,0);}.logo::after{transform:rotate(-58deg)translate3d(50px,-25px,0);}寰楀埌杩欐牱鐨勫浘褰€傝繖閲岄渶瑕佹敞鎰忕殑鏄紝鎴戜滑鏃嬭浆鐨勬椂鍊欙紝铏界劧涓績鐐规槸centercenter锛屼絾鏄棆杞箣鍚庝細鏈変綅缃亸绉伙紝鎵€浠ユ垜浠渶瑕佽皟鏁磝杞村拰y杞寸殑鍋忕Щtranslated3d(50px,-25px,0).杩欓噷鐨勫亸绉婚噺鍜屾棆杞搴﹀彧鏄洰娴嬨€傜敾瀹屼箣鍚庡氨鏈変簡涓€涓熀鏈殑杞粨锛屼腑闂磋繕鏈夐偅涓偣銆傝繖涓緢绠€鍗曪紝灏辨槸鐢?react浼厓绱犵敾涓€涓渾锛屽畾浣嶅湪涓棿銆?react::after{鍐呭锛氣€溾€濓紱浣嶇疆锛氱粷瀵癸紱椤堕儴锛?0%锛涘乏锛?0%锛涘搴︼細42px锛涢珮搴︼細42px锛涜儗鏅鑹诧細褰撳墠棰滆壊锛涜竟鐣屽崐寰勶細50%锛涜浆鎹細translate3d(-50%,-50%,0);z-index:2;}鐒跺悗灏卞彲浠ュ緱鍒版渶缁堢殑Logo鍥惧舰浜嗐€傚湪杩欎釜鍦嗗湀涓紝浣犲彲浠ョ湅鍒癰ackground-color:currentcolor;琚娇鐢紝鑰宐order:10pxsolid;鍦ㄧ粯鍒舵き鍦嗕互浣跨敤杈规鏃朵娇鐢ㄣ€傚洜涓篵ackground-color涓嶇户鎵縞olor鐨勯鑹插€硷紝鑰宐order-color浣跨敤鏈畾涔夋椂鐨勯鑹插€笺€傛妸鍩烘湰鐨凴eactLogo鏀逛竴涓嬶紝鐢–SS缁樺埗锛屽啀鏀逛竴涓嬶紝鎶奲order鎹㈡垚box-shadow锛岀敤shadow瀹炵幇涓€涓嚎鏉′笉鍧囧寑鐨刲ogo銆傞毦涓嶉毦鐪嬶紝濂藉儚鎸洪毦鐪嬬殑锛屼絾鏄劅瑙変笉涓€鏍佛煠?..瀹炵幇鐨勬柟娉曚篃寰堢畝鍗曪紝灏辨槸鍘绘帀鎵€鏈夌殑杈规锛岀洿鎺ョ敤box-shadow銆?logo,.logo::after,.logo::before{position:absolute;椤堕儴锛?0%锛涘乏锛?锛涘搴︼細250px锛涢珮搴︼細100px锛?*杈规锛?0px瀹炲績锛?/border-radius:50%;/*妗嗗ぇ灏忥細杈规妗嗭紱*/transform:translateY(-50%);妗嗛槾褰憋細10px-2px2px7px锛泎-index:1;}.logo::after,.logo::before{content:'';/*宸︼細-12px锛?/transform:rotate(58deg)translate3d(-50px,-25px,0);box-shadow:7px-4px2px6px;}.logo::after{transform:rotate(-58deg)translate3d(50px,-25px,0);box-shadow:-4px-8px2px8px;}removeleft:-12px;鍥犱负杈规娑堝け浜嗭紝鐩掑瓙妯″瀷鐨勫搴﹀彂鐢熶簡鍙樺寲銆傝繖閲岄渶瑕佹敞鎰忕殑鏄紝棰滆壊鍊煎苟娌℃湁鍔犲叆鍒癰ox-shadow涓紝鍘熷洜鍦ㄤ笂闈粙缁嶈繃锛屽悓鐞嗐€傚鏋滆绉诲姩瀹冿紝鍙渶瑕佹坊鍔犱竴涓猘nimation鍔ㄧ敾锛屾晥鏋滃ぇ姒傛槸杩欐牱鐨勩€傜湅璧锋潵寮х嚎鐨勬晥鏋滄槸绉诲姩鐨勶紝瀹為檯涓婂彧鏄敼鍙樹簡褰卞瓙鐨勪綅缃€傚湪鍔ㄧ敾鐨勮繃绋嬩腑锛岄『渚夸篃淇敼浜嗗奖瀛愮殑鍊笺€倉25%{鐩掑瓙闃村奖锛?0px4px2px1px;}50%{鐩掑瓙闃村奖锛?10px4px2px1px;}75%{妗嗛槾褰憋細-10px-4px2px1px;}}@keyframesrunLogo{0%,100%{box-shadow:7px-2px5px;}25%{妗嗛槾褰憋細7px2px5px锛泒50%{妗?闃村奖锛?7px2px5px锛泒75%{妗嗛槾褰憋細-7px-2px5px锛泒}鐜板湪鍙互鐪嬪埌鐨勬晥鏋滐紝涓棿鐨勫渾鍦堟槸涓嶄細鍙樼殑锛屾墍浠ュ姞涓€鐐瑰姩鐢绘銆侤keyframesblink{0%,100%{transform:scale(1)translate3d(-50%,-50%,0);妗嗛槾褰憋細0015px锛涗笉閫忔槑搴︼細1锛泒60%{transform:scale(1.05)translate3d(-50%,-50%,0);鐩掑瓙闃村奖锛氭棤锛涗笉閫忔槑搴︼細0.8锛泒}杩欐牱锛屽皬鍦嗗湀灏辨湁浜嗙被浼尖€滃懠鍚糕€濈殑鎰熻锛屽簲璇ユ槸鍚с€傛病鍏崇郴锛屽弽姝ｆ湁鍔ㄧ敾鏁堟灉銆傛渶鍚庝竴涓叧閿儴鍒嗘槸璁╁姩鐢诲姩璧锋潵銆?react::after{animation:blink1.5s0sinfiniteease-in-out;}鎰熻缁欏皬鍦嗙偣娣诲姞闂儊鏁堟灉銆?logo,.logo::after,.logo::before{/*box-shadow:10px-2px2px7px;*/animation:runLogo1s0sinfinitelinear;}.logo::after,.logo::before{/*box-shadow:10px-4px2px1px;*/animation-name:runLogoPseudo;}.logo::after{/*box-shadow:-4px-8px2px8px;*/animation-direction:alternate;}firstThroughanimation:runLogo1s0sinfinitelinear;璁╀笁涓き鍦嗘湁鐩稿悓鐨勫姩鐢绘晥鏋滐紱鐒跺悗鏇存敼鍔ㄧ敾甯у悕animation-name:runLogoPseudo;鍦ㄤ吉鍏冪礌涓€夋嫨鐩稿簲鐨勫姩鐢绘晥鏋滐紱鏈€鍚庢敼鍙樺叾涓竴涓吉鍏冪礌鐨凙nimation鏂瑰悜锛屼娇涓や釜鍊炬枩鐨勬き鍦嗚繍鍔ㄦ柟鍚戠浉鍙峚nimation-direction:alternate;锛屽舰鎴愪笉鍚岀殑瑙嗗樊鎰燂紱鏈€鍚庯紝鐢变簬杩欎釜鍔ㄧ敾鏄痠nfinite鏃犻檺杩愬姩锛岄偅涔堝幓鎺塨ox-shadow鐨勫€硷紝鍦ˊkeyframes涓氨鏈夊搴旂殑box-shadow灞炴€э紱杩樻湁鍚楋紵鎴戠殑韬竟鐜板湪涓嶈浜嗐€傛湁鍏磋叮鐨勫彲浠ヨ€冭檻缁撳悎娓愬彉鑹插疄鐜拌竟妗嗭紝鐒跺悗鍚戜笂婊氬姩銆備篃鍙互缁撳悎mix-blend-mode鏉ョ帺涓€浜涗箰瓒ｃ€備互涓婂氨鏄叿浣撶殑鍒涗綔鎬濊矾...鏁堟灉棰勮https://codepen.io/linxz/pen/...棣栧彂浜庢垜涓汉鐨勫叕浼楀彿鈥滅煡涔庤嚜涔愨€濓紝https://mp.weixin.qq銆俢om/s/83...