鎴戜滑鏈変竴涓埗div鍏冪礌銆俻arent锛屽叾涓寘鍚竴涓瓙鍏冪礌.suchi鐢ㄤ簬灞曠ず馃崳銆傛垜浠敤涓€寮犺儗鏅浘鏉ュ疄渚嬪寲馃崳锛?sushi鍏冪礌鐨勫叿浣撴牱寮忚鍒欏涓嬶細.sushi{margin:100px;瀹藉害锛?50px锛涢珮搴︼細150px锛涜儗鏅浘鍍忥細url锛堚€渉ttps://www.kirupa.com/icon/1f363.svg鈥濓級锛涜儗鏅噸澶嶏細涓嶉噸澶嶏紱background-size:contain;}鍦ㄤ笂闈㈢殑鏍峰紡瑙勫垯涓紝鎴戜滑璁剧疆浜哾iv鐨勫楂樹负150*150鍍忕礌锛屽苟璁剧疆浜哹ackground-image鍜岀浉鍏崇殑灞炴€э紝濡傛灉鎴戜滑灞曠ず涓€涓嬫垜浠幇鍦ㄥ疄鐜扮殑缁撴灉锛屽彲浠ョ湅鍒板唴瀹瑰涓嬪浘鎵€绀恒€傚垱寤洪槾褰辩幇鍦ㄦ垜浠凡缁忓睍绀轰簡鎴戜滑鐨勫鍙葛煃ｅ浘鍍忥紝鏇存湁瓒ｇ殑閮ㄥ垎鏄畾涔夐槾褰便€傛垜浠皢鎸囧畾涓€涓瓙浼厓绱?:after鏉ュ畾涔夐槾褰憋紝瀹冧細鍋?浠朵簨锛氱洿鎺ュ湪鍥惧儚鎵€鍦ㄧ殑div鍚庨潰锛涚户鎵夸笌鐖跺厓绱犵浉鍚岀殑鑳屾櫙鍥剧墖锛涢€氳繃婊ら暅鏁堟灉浜х敓浜旈鍏壊鐨勬姇褰辨晥鏋溿€備互涓婁笁涓姛鑳芥槸閫氳繃浠ヤ笅涓や釜鏍峰紡瑙勫垯瀹炵幇鐨勶細.colorfulShadow{position:relative;}.colorfulShadow::after{content:"";瀹藉害锛?00%锛涢珮搴︼細100%锛涗綅缃細缁濆锛涜儗鏅細缁ф壙锛涜儗鏅?浣嶇疆锛氫腑蹇冧腑蹇冿紱婊ら暅锛氶槾褰憋紙0px0px10pxrgba锛?銆?銆?銆?.50锛夛級妯＄硦锛?0px锛夛紱z-index:-1;}鑺辩偣鏃堕棿娴忚涓€涓嬭繖閲岀殑瀹炵幇锛屽瘑鍒囧叧娉ㄦ瘡涓睘鎬у拰鐩稿簲鐨勫€笺€傛渶鍊煎緱娉ㄦ剰鐨勬槸鑳屾櫙鍜岃繃婊ゅ櫒灞炴€с€俠ackground鐨勫€间负inherit锛岃〃绀轰細缁ф壙鐖跺厓绱犵殑鑳屾櫙鍊硷細background:inherit;filter灞炴€у畾涔変簡涓や釜婊ら暅鍊硷細drop-shadow鍜宐lurfilter锛歞rop-shadow(0px0px10pxrgba(0,0,0,0.50))blur(20px);鎴戜滑鐨勬姇褰辨护闀滆缃簡涓€涓?0%涓嶉€忔槑搴︾殑榛戣壊闃村奖銆傛ā绯婃护闀滃氨鏄粰鍏冪礌璁剧疆涓€涓?0px鐨勬ā绯婃晥鏋溿€傝繖涓や釜杩囨护鍣ㄧ殑缁勫悎鏈€缁堝彲浠ュ垱寤哄僵鑹查槾褰便€傚綋杩欎袱涓牱寮忚鍒欑敓鏁堝悗锛屾垜浠彲浠ョ湅鍒板鍙葛煃ｅ浘鐗囧悗闈㈠嚭鐜颁簡褰╄壊鐨勯槾褰憋紝濡備笅鍥撅細鑷虫锛屾垜浠氨澶у姛鍛婃垚浜嗐€備负浜嗗畬鏁磋捣瑙侊紝濡傛灉鎮ㄥ笇鏈涘僵鑹查槾褰卞姩鐢绘斁澶у拰缂╁皬锛屼互涓嬮檮鍔燙SS灏嗕负鎮ㄥ畬鎴愶細瀹藉害锛?00%锛涢珮搴︼細100%锛涗綅缃細缁濆锛涜儗鏅細缁ф壙锛涜儗鏅綅缃細涓績涓績锛涙护闀滐細闃村奖锛?px0px10pxrgba锛?銆?銆?銆?.50锛夛級妯＄硦锛?0px锛夛紱-1锛?*鍔ㄧ敾鏃堕棿锛?/animation:oscillate1scubic-bezier(.17,.67,.45,1.32)鏃犻檺浜ゆ浛;}@keyframesoscillate{from{transform:scale(1,1);}鍒皗鍙樻崲锛氭瘮渚嬶紙1.3锛?.3锛夛紱濡傛灉鎮ㄦ兂鍦ㄤ笉浣跨敤寰幆鍔ㄧ敾鈥嬧€嬫晥鏋滅殑鎯呭喌涓嬪寮轰氦浜掓€э紙渚嬪鍦ㄦ偓鍋滄搷浣滅殑鎯呭喌涓嬶級锛屾偍杩樺彲浠ヤ娇鐢–SS杩囨浮鏉ユ洿鏀归槾褰辩殑琛屼负銆傞渶瑕佸己璋冪殑鍥伴毦閮ㄥ垎鏄紝鎮ㄥ彧闇€鍍忓寰呬娇鐢℉TML鍒涘缓鐨勫厓绱犳垨浣跨敤JavaScript鍔ㄦ€佸垱寤虹殑鍏冪礌涓€鏍峰寰呬吉鍏冪礌锛屽敮涓€鐨勫尯鍒槸璇ュ厓绱犲畬鍏ㄤ粎浣跨敤CSS鍒涘缓锛佺粨璁轰吉鍏冪礌鍏佽鎴戜滑浣跨敤CSS鏉ュ垱寤洪€氬父鍦℉TML鍜孞avaScript棰嗗煙涓畬鎴愮殑鍏冪礌銆傚浜庢垜浠褰╃殑鏅鸿兘闃村奖锛屾垜浠緷闈犵埗鍏冪礌璁剧疆鑳屾櫙鍥惧儚锛岃繖浣挎垜浠彲浠ヨ交鏉惧畾涔変竴涓彲浠ョ户鎵跨埗鍏冪礌鐨勮儗鏅粏鑺備互鍙婅缃ā绯婂拰鎶曞奖鏁堟灉鐨勫瓙鍏冪礌銆傝櫧鐒惰繖涓€鍒囬兘寰堝ソ骞朵笖涓烘垜浠妭鐪佷簡澶ч噺鐨勫鍒剁矘璐村伐浣滐紝浣嗚繖绉嶆柟娉曚篃涓嶆槸寰堢伒娲汇€傚鏋滄垜鎯冲皢杩欐牱鐨勯槾褰卞簲鐢ㄥ埌涓€涓病鏈夎儗鏅浘鍍忕殑绌哄厓绱犱笂鎬庝箞鍔烇紵濡傛灉鎴戞湁涓€涓狧TML鍏冪礌锛堝鎸夐挳鎴栫粍鍚堟锛夊苟涓旀垜鎯冲簲鐢ㄦ闃村奖鏁堟灉鎬庝箞鍔烇紵涓€绉嶈В鍐虫柟妗堟槸渚濋潬JavaScript澶嶅埗DOM涓搴旂殑鍏冪礌锛屾斁鍦ㄥ墠鏅厓绱犵殑搴曢儴锛屽簲鐢ㄨ繃婊ゅ櫒锛屼篃鏄竴绉嶆柟寮忋€傝櫧鐒惰繖琛屽緱閫氾紝浣嗘垜涓€鎯冲埌澶嶅埗DOM鍏冪礌杩欎釜鏈夌偣绻侀噸鐨勮繃绋嬪氨涓嶅瘨鑰屾牀銆傛洿绯熺硶鐨勬槸锛孞avaScript鏃犳硶灏嗘偍鎯宠鎻愪緵鐨勪换浣曡瑙夋剰鍥捐浆鎹负娓叉煋鐩爣浣嶅浘锛侌煡?/p>