.g-container{浣嶇疆锛氱浉瀵癸紱瀹藉害锛?00px锛涢珮搴︼細300px锛涙孩鍑猴細闅愯棌锛泒.g-item{浣嶇疆锛氱粷瀵癸紱瀹藉害锛?8px锛涢珮搴︼細48px锛涜竟鐣屽崐寰勶細50%锛?0px;鐩掑瓙闃村奖锛?000#fff锛涜繃娓★細box-shadow.3s绾挎€э紱&:hover{box-shadow:000420px#fff;}}鏍稿績鏄細澶栧眰璁剧疆婧㈠嚭锛氬綋hideenmask鐨勫唴灞傚厓绱犳偓鍋滄椂锛屼竴涓猙ox-shadow:0000#ffftobox-shadow:000420px#fff鍙樺寲濡備笅锛氭暣浣撳姩鐢绘槸妯℃嫙鍑烘潵鐨勶紝浣嗘槸鏈€鑷村懡鐨勯棶棰樻湁涓や釜锛氬綋鎴戜滑鐨勯紶鏍囩寮€鍦嗗湀鐨勬椂鍊欙紝鏁翠釜鍔ㄧ敾寮€濮嬪弽杞紝鐧借壊鐨勫尯鍩熷紑濮嬫秷澶便€傚鏋滄垜浠杩涜鎸夐挳鎿嶄綔锛屼笉鑳藉湪鍔ㄧ敾灞曞紑鍚庨殣钘忓湪鐭╁舰涓€傚厓绱犱笉濂芥斁锛屾墍浠ox-shadow鐪嬬潃涓嶉敊锛屼絾涔熷彧鑳芥斁寮冧簡銆備笂闈emo鐨勪唬鐮佲€斺€擟odePenDemo鈥斺€斿姩鐢讳腑鐨刡ox-shadow鏀惧ぇ锛屼娇鐢╣radientradial-gradient鏉ュ疄鐜板涓嬨€傛垜浠娇鐢╮adial-gradientradial-gradient鍔犱笂CSS@property锛屼篃鍙互杩樺師涓婇潰鐨勬晥鏋滐細缁ф壙锛氬亣鐨勶紱鍒濆鍊硷細24px锛泒.g-container{浣嶇疆锛氱浉瀵癸紱瀹藉害锛?00px锛涢珮搴︼細300px锛涙孩鍑猴細闅愯棌锛涜儗鏅細寰勫悜娓愬彉锛堝渾鍦堝湪44px44px锛?fff0锛?fffvar锛?-size锛夛紝閫忔槑var锛?-size锛夛紝閫忔槑0锛夛紱杩囨浮锛?-size.3s绾挎€э紱&:hover{--size:450px;}}閫氳繃鎺у埗寰勫悜娓愬彉鐨勫姩鐢绘晥鏋滐紝鍦ㄦ偓鍋滄椂锛岃鍘熸潵鐨勫皬鍦嗚儗鏅彉鎴愬ぇ鍦嗚儗鏅紝鏁堟灉濡備笅锛歟mmm锛屾晥鏋滅‘瀹炶繕鍘熶簡锛岄棶棰樹篃寰堣嚧鍛斤細鍥犱负鑳屾櫙鍙樺寲鍚庯紝榧犳爣涓嶉渶瑕佹偓鍋滃湪灏忓渾鍦堜笂锛屽彧闇€瑕佽繘鍏iv鐨勮寖鍥村唴锛屽姩鐢诲氨浼氬紑濮嬨€傝繖鏄剧劧鏄敊璇殑銆傚拰绗竴绉峛ox-shadow鏂规硶绫讳技锛宧ide鐧借壊涓嬪鑸厓绱犵殑DOM涓嶅ソ鏀剧疆涓婇潰Demo鐨勪唬鐮?-CodePenDemo--radial-gradientzoominanimationemmm锛岃繕鏈変竴涓柟娉曪紝閫氳繃zoomingtransform:scale()锛屼篃浼氭湁涓€瀹氱殑闂锛岃繖閲屽氨涓嶇户缁睍寮€浜嗐€傛墍浠ヨ繖閲岋紝濡傛灉瑕佸疄鐜颁笂闈㈢殑鏁堟灉锛屾牳蹇冩槸锛氶紶鏍囧繀椤绘偓鍋滃湪鍦嗕笂鎵嶈兘寮€濮嬪姩鐢伙紝骞朵笖榧犳爣鍦ㄥ睍寮€鐨勮寖鍥村唴鍙互鑷敱绉诲姩锛屼笉浼氭敹鍥炲姩鐢绘晥鏋溿€傚姩鐢诲睍寮€鍚庯紝DOM閲岄潰鐨勬斁缃簲璇ヤ笉浼氬お楹荤儲銆傚鏋滀笉鐢↗avascript灏辫兘鎺у埗鍐呭鐨勬樉绀哄拰闅愯棌锛屾渶濂戒娇鐢╟lip-path鏉ュ疄鐜板姩鎬佸尯鍩熻鍓€傛墍浠ワ紝鍦ㄨ繖閲岋紝鎴戜滑瀹為檯涓婇渶瑕佷竴涓姩鎬佸尯鍩熻鍓€傚湪鎴戠殑杩欑瘒鏂囩珷涓€斺€擧owtoimplementoverflow:hiddenwithoutoverflow:hidden?锛屼粙缁嶄簡CSS涓嚑绉嶈鍓厓绱犵殑鏂瑰紡锛屽叾涓渶閫傚悎杩欑鏁堟灉鐨勬槸鈥斺€攃lip-path銆備娇鐢╟lip-path鍙互寰堝ソ鐨勫疄鐜板姩鎬佽鍓殑鍔熻兘锛屼唬鐮佷篃寰堢畝鍗曪細