浠€涔堟槸PanningShot锛熺湅涓嬪浘鐨勯暅澶存晥鏋滐細鍦ㄨ棰戝満鏅腑锛屽線寰€闇€瑕佸疄鐜癙anningShot鐨勬晥鏋溿€傚湪鎽勫奖鏂归潰锛岃繖涓彨鍋歅anningShot锛屽姩鐢籧odepen涓湁寰堝瀹炵幇闀滃ご鎽囨憚鏁堟灉鐨勬柟娉曘€傛瘮濡傛垜鍦╟odepen涓悳绱紝鎵惧埌浜嗕竴涓娇鐢╞ackground-position瀹炵幇SimpleCSSBackgroundPanning鐨勭敤渚嬨€俢odepen涓婄殑瀹炵幇鍏跺疄姣旇緝绠€鍗曪紝涓嶈繃鍝ぉ瀹炵幇涓€涓猚ss鍔ㄧ敾闀滃ご锛岄渶瑕佸钩绉荤殑鏃跺€欙紝鎯冲埌浜嗕竴涓洿绠€娲佺殑hiahia馃槣锛屽彧闇€瑕佷笁琛屽叧閿殑CSS浠ｇ爜灏辨悶瀹氫簡锛屽簾璇濅笉澶氳锛屽厛鏉ョ湅鐪嬫晥鏋滐細涓夎CSS鍏抽敭浠ｇ爜寰楀埌鎽囨憚闀滃ご锛圥anningShot锛夊姩鐢昏繖閲屼富瑕佹槸浣跨敤transform:scale()鍜宐ackground-size鏉ュ疄鐜皌ransform-origin鐨勫彉鎹細鍖呭惈;杩欎袱涓狢SS灞炴€с€傝嚦浜庢暣涓浘鍍忕殑鏄剧ず鍖哄煙锛屽彧闇€瑕佽皟鏁磘ransform:scale()鐨勫€煎嵆鍙€傛垜浠湅涓嬮潰鐨勪唬鐮侊細CSS鍏抽敭閮ㄥ垎浠ｇ爜//Initialstyleofbackgroundimage.bg{...background-size:contain;鍙樻崲鍘熺偣锛氬彸涓婅锛涘彉鎹細瑙勬ā锛?锛夛紱transition:all2s;}//鐒跺悗閫氳繃JS娣诲姞涓€涓牱寮忕被鍗冲彲銆傚钩绉绘媿鎽剓椤堕儴锛?;鍙樻崲鍘熺偣锛氬乏涓婏紱鑳屾櫙澶у皬锛氬寘鍚紱鍙樻崲锛氳妯★紙3锛夛紱}
