#g-content{width:300px;韬珮锛?70vh锛涜儗鏅細#999锛泒#g-box{瀛椾綋澶у皬锛?50px锛涗繚璇侀噾锛?0vh鑷姩0锛涘姩鐢诲悕绉帮細鏃嬭浆锛涘姩鐢绘寔缁椂闂达細3s锛涘姩鐢绘柟鍚戯細浜ゆ浛锛涘姩鐢荤紦鍔ㄥ嚱鏁帮細绾挎€э紱鍔ㄧ敾鏃堕棿杞达細box-rotate;}@keyframesrotate{0%{transform:rotate(0);}100%{鍙樻崲锛氭棆杞紙360deg锛夛紱}}@scroll-timelinebox-rotate{鏉ユ簮锛歴elector("#g-content");}杩欓噷锛屾垜浠疄鐜颁簡涓€涓彲婊氬姩鐨勫鍣?g-content锛屽畠鐨勯珮搴︿负170vh锛屾槸鍙鍖栫晫闈㈤珮搴︾殑1.7鍊嶏紝灏?g-box瀹瑰櫒鏀剧疆鍦ㄤ竴涓湴鏂瑰湪璺濈椤堕儴70vh鐨勯珮搴︼細鏈夎叮鐨勪簨鎯呮潵浜嗭紝鎴戜滑璁剧疆鐨勬棆杞姩鐢讳笉浼氳嚜鍔ㄥ惎鍔紝鍙湁褰撴垜浠悜涓嬫粴鍔ㄦ椂锛屽姩鐢绘墠浼氬惎鍔紝瀹為檯鏁堟灉Gif锛欳odePenDemo--@scroll-timeline瑙侀€氳繃杩欎釜demo锛屽ぇ瀹跺簲璇ヨ兘鐞嗚В@scroll-timeline鐨勪綔鐢ㄥ拰鎰忎箟浜嗭紝瀹冭祴浜堜簡css鏍规嵁婊氬姩鏉＄殑婊氬姩鏉ユ帶鍒跺姩鐢昏繘搴︾殑鑳藉姏锛佹儕浜虹殑锛侊紒@scroll-timeline璇硶浠嬬粛鎺ヤ笅鏉ユ垜浠姳鐐规椂闂寸畝鍗曠湅涓€涓婡scroll-timeline鐨勮娉曚娇鐢ˊscroll-timeline锛屾牳蹇冩槸瀹氫箟涓€涓狜scroll-timeline瑙勫垯锛欯scroll-timelinemoveTimeline{source:selector("#g-content");鏂瑰悜锛氬瀭鐩达紱scroll-offsets:0px,500px;}鍏朵腑锛歴ource:缁戝畾瑙﹀彂婊氬姩鍔ㄧ敾鐨勬粴鍔ㄥ鍣╯ource:auto:缁戝畾鍒癉ocument锛屼篃灏辨槸鍏ㄥ眬鐨刉indows瀵硅薄source:selector("id-selector"),閫氳繃selector(),鍐呯疆浜嗕竴涓?id閫夋嫨鍣紝閫夋嫨涓€涓彲婊氬姩鐨勫鍣╯ource:none:涓嶆寚婊氬姩瀹瑰櫒orientation:璁剧疆婊氬姩鏃堕棿绾跨殑鏂瑰悜orientation:auto:榛樿涓哄瀭鐩达紝鍗冲湪verticaldirectionorientation:vertical:鍨傜洿鏂瑰悜婊氬姩orientation:horizo鈥嬧€媙tal:姘村钩婊氬姩orientation:block:涓嶅父鐢紝浣跨敤娌縝lock杞寸殑婊氬姩浣嶇疆锛岀鍚堜功鍐欐柟寮忓拰orientationorientation:inline:涓嶅父鐢紝浣跨敤scrollpositionalongtheinlineaxis,conformtothewritingmodeandorientationscroll-offsets:婊氬姩鏃堕棿杞寸殑鏍稿績锛岃缃湪浠€涔堥樁娈垫粴鍔紝瑙﹀彂鍔ㄧ敾锛屽彲浠ヨ缃负涓夌鏂瑰紡涔嬩竴锛歴croll-offsets:none杩欐剰鍛崇潃娌℃湁鎸囧畾婊氬姩鍋忕Щ閲忋€傜敱鍊肩殑閫楀彿鍒嗛殧鍒楄〃纭畾銆傛瘡涓€奸兘鏄犲皠鍒板姩鐢绘寔缁椂闂淬€備緥濡傦紝濡傛灉animation-duration璁剧疆涓?s锛屾粴鍔ㄥ亸绉婚噺涓?px銆?0px銆?00px锛屽湪1s鏃讹紝婊氬姩鍋忕Щ閲忓皢涓?0px銆傜‘瀹氭粴鍔ㄥ亸绉婚噺鐨勭涓夌鏂规硶鏄娇鐢ㄥ厓绱犲亸绉婚噺銆傝繖鎰忓懗鐫€鍙互鍦ㄩ〉闈腑鎸囧畾鍏朵綅缃喅瀹氭粴鍔ㄦ椂闂磋酱鐨勫厓绱犱互鍙婁娇鐢ㄨ繖浜涘厓绱犵殑鍝釜杈圭紭銆傛寚瀹氬厓绱犳槸浣跨敤selector()鍑芥暟瀹屾垚鐨勶紝璇ュ嚱鏁版帴鏀跺厓绱犵殑id銆傝竟鐢卞叧閿瓧start鎴杄nd鍐冲畾銆傚彲閫夌殑0-1闃堝€煎彲鐢ㄤ簬琛ㄧず棰勬湡鍦ㄦ粴鍔ㄤ腑鍙鐨勫厓绱犵殑鐧惧垎姣斻€俿croll-offsets鐨勭悊瑙ｄ細姣旇緝鍥伴毦锛屽悗闈細璇︾粏璇存槑銆傝缃ソ@scroll-timeline鍚庯紝鎴戜滑鍙渶瑕佸皢瀹冪粦瀹氬埌鍔ㄧ敾涓婏紝閫氳繃animation-timeline:@scroll-timelinemoveTimeline{source:selector("#g-content");鏂瑰悜锛氬瀭鐩达紱scroll-offsets:0px,500px;}div{animation-name:move;鍔ㄧ敾鎸佺画鏃堕棿锛?s锛涘姩鐢绘椂闂磋酱锛歮oveTimeline;}@keyframesmove{0%{transform:translate(0,0);}100%{杞崲锛氱炕璇戯紙100%锛?锛夛紱}}浣跨敤@scroll-timeline瀹炵幇婊氬姩杩涘害鏉″湪浠や汉闅句互缃俊鐨勭函CSS婊氬姩杩涘害鏉℃晥鏋滀竴鏂囦腑锛屾垜浠粙缁嶄簡涓€涓娇鐢ㄦ笎鍙樼殑绾疌SS婊氬姩杩涘害鏉¤澶囨晥鏋滐細杩欑鏂规硶鏈変竴浜涘皬缂洪櫡銆傚叾涓箣涓€灏辨槸褰撴粴鍔ㄨ窛绂昏繃鐭椂锛岃繘搴︽潯鍙充晶浼氬嚭鐜版槑鏄剧殑鏂滆鏁堟灉銆傛湁浜咢scroll-timeline锛屾垜浠粓浜庡彲浠ョ粦瀹氭粴鍔ㄥ拰鍔ㄧ敾杩欎袱涓厓绱狅紝杩涜€屽疄鐜版粴鍔ㄨ繘搴︽潯锛岄潪甯哥畝鍗曪細

...鏂囨湰鍐呭銆?.