探索神奇的运动路径动画MotionPath
时间：2023-03-30 15:48:49
CSS
CSS鏈変竴涓緢鏈夋剰鎬濈殑妯″潡鈥斺€擟SSMotionPathModuleLevel1锛岀炕璇戣繃鏉ュ氨鏄繍鍔ㄨ矾寰勩€傛湰鏂囧皢浠旂粏鐮旂┒杩愬姩璺緞銆傞€氳繃鏈枃锛屾偍鍙互浜嗚В鍒帮細浠€涔堟槸CSS杩愬姩璺緞浣跨敤CSS杩愬姩璺緞鍒朵綔绠€鍗曡矾寰勫姩鐢讳娇鐢–SS杩愬姩璺緞鍒朵綔澶嶆潅璺緞鍔ㄧ敾浠€涔堟槸CSSMotionPath杩愬姩璺緞锛熶粈涔堟槸CSS杩愬姩璺緞锛熷埄鐢ㄦ湰瑙勮寖瑙勫畾鐨勫睘鎬э紝鎴戜滑鍙互鎺у埗鍏冪礌鎸夌収鐗瑰畾璺緞杩涜浣嶇疆鍙樻崲鐨勫姩鐢汇€傝€屼笖锛岃繖鏉¤矾寰勫彲鑳芥槸涓€鏉￠潪甯稿鏉傜殑璺緞銆傚湪娣卞叆鎺㈣CSSMotionPath涔嬪墠锛岃鎴戜滑鍏堢湅鐪嬪浣曚娇鐢ㄤ紶缁烠SS鐨勫姛鑳芥潵瀹炵幇璺緞鍔ㄧ敾銆侰SS瀹炵幇鐩寸嚎璺緞鍔ㄧ敾鐨勪紶缁熸柟寮忎箣鍓嶆垜浠兂鎶婁竴涓墿浣撲粠A鐐圭洿绾跨Щ鍔ㄥ埌B鐐广€備竴鑸潵璇达紝鎴戜滑鍙互浣跨敤transform:translate(),top|宸搴曢儴|right鎴杕argin鍙互鏀瑰彉瀵硅薄浣嶇疆鐨勫睘鎬с€備竴涓畝鍗曠殑婕旂ず锛?div>div{width:60px;楂樺害锛?0px锛涜儗鏅細#000锛涘姩鐢伙細鏃犻檺绉诲姩1s浜ゆ浛绾挎€э紱}@keyframes绉诲姩{100%{transform锛歵ranslate(100px,100px);}}浠嶢鐐瑰埌B鐐圭殑绠€鍗曠洿绾胯繍鍔ㄦ晥鏋滃涓嬶細CSS浼犵粺鏂瑰紡瀹炵幇鏇茬嚎璺緞鍔ㄧ敾褰撶劧CSS涔熷彲浠ュ疄鐜颁竴浜涚畝鍗曠殑鏇茬嚎璺緞鍔ㄧ敾銆傚鏋滄垜浠兂浠嶢鐐圭Щ鍔ㄥ埌B鐐硅€屼笉鏄洿绾匡紝鎴戜滑搴旇鎬庝箞鍋氾紵瀵逛簬涓€浜涚畝鍗曠殑鍦嗗姬鏇茬嚎璺緞锛岀敤涓€浜涘阀濡欑殑鏂规硶杩樻槸鍙互瀹炵幇鐨勶紝鐪嬩笅闈㈢殑渚嬪瓙銆傝繖娆★紝鎴戜滑浣跨敤浜嗕袱涓厓绱犮€傚瓙鍏冪礌鏄竴涓皬鐞冿紝鎯宠鏇茬嚎绉诲姩锛屼絾瀹為檯涓婃垜浠缃埗鍏冪礌鐨則ransform-origin锛岃鐖跺厓绱犺繘琛屼竴娆″彉鎹細rotate()movement椹卞姩瀛愬厓绱犵殑灏忕悆:
.g-container{浣嶇疆锛氱浉瀵癸紱瀹藉害锛?0vmin锛涢珮搴︼細70vmin锛涘彉鎹㈠師鐐癸細涓績0锛沘nimation:rotate1.5sinfinitealternate;}.g-ball{position:absolute;瀹藉害锛?0vmin锛涢珮搴︼細10vmin锛涜竟鐣屽崐寰勶細50%锛涜儗鏅細寰勫悜娓愬彉锛堝渾褰紝#fff锛?000锛夛紱搴曢儴锛?锛涘乏锛?锛泒@keyframes鏃嬭浆{100%{鍙樻崲锛氭棆杞紙90搴︼級锛泒}涓轰簡鏂逛究鐞嗚В锛屽湪绉诲姩鐨勮繃绋嬩腑锛屾垜璁╃埗鍏冪礌鐨勮疆寤撳嚭鐜颁簡锛氳繖鏍凤紝鎴戜滑灏卞媺寮哄彲浠ュ緱鍒颁竴涓潪绾挎€х殑璺緞杩愬姩鍔ㄧ敾锛屽畠鐨勫疄闄呰繍鍔ㄨ建杩规槸涓€鏉℃洸绾裤€備笉杩囷紝杩欏熀鏈笂鏄互鍓岰SS鎵€鑳藉仛鍒扮殑鏋侀檺浜嗐€備娇鐢ㄧ函CSS鐨勬柟娉曪紝鏄病鏈夊姙娉曞疄鐜版洿澶嶆潅鐨勮矾寰勫姩鐢荤殑锛屾瘮濡備笅闈㈢殑璺緞鍔ㄧ敾锛氱洿鍒扮幇鍦紝鎴戜滑鏈変簡鏇村己澶х殑涓撻棬鍋氳繖浠朵簨鐨勮鑼冿紝杩欏氨鏄湰鏂囩殑涓昏鈥斺€擟SSMotionPath銆侰SSMotionPath瀹炵幇鐩寸嚎璺緞鍔ㄧ敾銆侰SSMotionPath瑙勮寖涓昏鍖呮嫭浠ヤ笅灞炴€э細offset-path锛氭帴鏀朵竴涓猄VG璺緞锛堢被浼间簬CSS涓殑SVGpath鍜宑lip-path锛夛紝鎸囧畾鍑犱綍璺緞offset-distanceofmotion锛氭帶鍒跺綋鍓嶅厓绱犵殑璺濈鍩轰簬offset-path鐨勭Щ鍔╫ffset-position锛氭寚瀹歰ffset-path鐨勫垵濮嬩綅缃畂ffset-anchor锛氬畾涔夋部offset-path瀹氫綅鐨勫厓绱犵殑閿氱偣銆傝繖涔熷緢濂界悊瑙ｃ€傜Щ鍔ㄧ殑鍏冪礌鍙兘涓嶆槸涓€涓偣锛屾墍浠ラ渶瑕佹寚瀹氬厓绱犱腑鐨勫摢涓偣闄勫姞鍒拌矾寰勪笂杩涜绉诲姩銆俹ffset-rotate锛氬畾涔夋部offset-path瀹氫綅鏃跺厓绱犵殑鏂瑰悜銆傜敤浜虹殑璇濊灏辨槸杩愬姩杩囩▼涓厓绱犵殑瑙掑害鏄湞涓嬬殑锛屾垜浠娇鐢∕otionPath鏉ュ疄鐜颁竴涓畝鍗曠殑绾挎€т綅绉诲姩鐢汇€?div>div{瀹藉害锛?0px;楂樺害锛?0px锛涜儗鏅細绾挎€ф笎鍙橈紙#fc0锛?f0c锛夛紱鍋忕Щ璺緞锛氳矾寰勶紙鈥淢00L100100鈥濓級锛涘亸绉绘棆杞細0deg锛涘姩鐢伙細绉诲姩2000姣鏃犻檺浜ゆ浛缂撳叆缂撳嚭锛泒@keyframes绉诲姩{0%{offset-distance:0%;}100%{鍋忕Щ璺濈锛?00%锛泒}offset-path鎺ユ敹涓€涓猄VG璺緞锛岃繖閲屾垜浠矾寰勭殑鍐呭鏄竴涓嚜瀹氫箟鐨刾ath璺緞锛堚€淢00L100100鈥濓級锛屾剰鎬濇槸浠?0鐐圭Щ鍔ㄥ埌100px100px鐐广€俹ffset-path閲囩敤SVG璺緞锛屾寚瀹氳繍鍔ㄧ殑鍑犱綍璺緞銆傜被浼间簬CSS涓殑SVG璺緞鍜宑lip-path锛屽鏋滀綘瀵硅繖涓猄VG璺緞涓嶆槸寰堜簡瑙ｏ紝鍙互鐐瑰嚮杩欓噷浜嗚ВSVG璺緞鐨勫唴瀹癸細SVG璺緞锛屾垜浠細寰楀埌濡備笅缁撴灉锛氶€氳繃鎺у埗鍏冪礌鐨勫亸绉昏窛绂讳粠0%鏇存敼涓?00%浠ュ姩鐢诲厓绱犵殑璺緞銆傚綋鐒讹紝涓婇潰鐨勫姩鐢绘槸鏈€鍩烘湰鐨勩€傛垜鍙互鍏呭垎鍒╃敤path鐨勭壒鎬э紝娣诲姞澶氫釜涓棿鍏抽敭甯э紝绋嶅井淇敼涓€涓嬩笂闈㈢殑浠ｇ爜锛歞iv{//鍙敼鍙樿繍鍔ㄨ矾寰勶紝鍏朵粬淇濇寔涓€鑷磑ffset-path:path("M00L1000鍗?000鍗?00100鍗?000鍗?00100鍗?000鍗?00100鍗?000");鍔ㄧ敾锛氱Щ鍔?000ms鏃犻檺浜ゆ浛绾挎€э紱}@keyframes绉诲姩{0%{offset-distance:0%;}100%{鍋忕Щ璺濈锛?00%锛泒}杩欓噷鏈€閲嶈鐨勬槸鍦ㄨ矾寰勪腑浣跨敤L鍛戒护寰楀埌涓€鏉＄洿绾胯矾寰勫涓嬪浘锛氭渶缁堟晥鏋滃涓嬶紝骞朵娇鐢╰ransform:translate()娣诲姞澶氫釜鍏抽敭甯э紝绫讳技锛氫竴涓畬鏁粹€嬧€嬬殑demo鍙互鐐瑰嚮杩欓噷锛欳odePenDemo--CSSMotionPathDemoCSSMotionPath瀹炵幇鏇茬嚎璺緞鍔ㄧ敾涓婇潰鐨勮繍鍔ㄨ建杩规槸鐢辩洿绾跨粍鎴愮殑锛屾垜浠潵鐪嬬湅濡備綍浣跨敤CSSMotionPath瀹炵幇鏇茬嚎璺緞鍔ㄧ敾銆傚叾瀹炲師鐞嗚繕鏄竴妯′竴鏍风殑锛屽彧鏄湪offset-path:path()涓姞鍏ユ洸绾跨浉鍏崇殑璺緞鍗冲彲銆傚湪SVG鐨凱ath涓紝鎴戜滑閲囩敤鍏朵腑涓€绉嶇粯鍒舵洸绾跨殑鏂规硶鈥斺€旇礉濉炲皵鏇茬嚎锛屾瘮濡備笅闈㈢殑璺緞锛屽叾涓矾寰勪负d="M1080C8010,13010,19080S300150,36080"锛?svgwidth="400"height="160"xmlns="http://www.w3.org/2000/svg">
瀵瑰簲杩欐牱涓€鏉¤繛缁殑璐濆灏旀洸绾匡細灏嗗搴旂殑璺緞搴旂敤鍒皁ffset-path:Inpath:
div:nth-child(2){瀹藉害锛?0px锛涢珮搴︼細40px锛涜儗鏅細绾挎€ф笎鍙橈紙#fc0锛?f0c锛夛紱鍋忕Щ璺緞锛氳矾寰勶紙'M1080C8010,13010,19080S300150,36080'锛?}@keyframesmove{0%{offset-distance:0%;}100%{鍋忕Щ璺濈锛?00%锛泒}鍙互寰楀埌濡備笅鐨勮繍鍔ㄦ晥鏋滐細鍙互鐪嬪嚭鍏冪礌鏄部鐫€璐濆灏旀洸绾跨殑璺緞杩愬姩鐨勶紝鐢变簬杩欐娌℃湁闄愬埗deadoffset-rotate锛屾墍浠ュ厓绱犵殑orientation涔熻窡鐫€鍙樺寲璺緞鐨勬柟鍚戙€傦紙鍙互鎯宠薄锛屽湪寮€杞︾殑鏃跺€欙紝杞﹀ご鎬绘槸浼氶殢鐫€璺喌鑰屽彉鍖栵紝甯﹀姩鏁翠釜杞﹁韩鐨勮搴﹀彂鐢熷彉鍖栥€傦級瀹屾暣鐨刣emo鍙互鐐硅繖閲岋細CodePenDemo--CSSMotionPathDemo鐞嗚Вoffset-anchor杩愬姩閿氱偣OK锛岄偅涔堟帴涓嬫潵锛屾垜浠湅鐪媜ffset-anchor鏄€庝箞鐞嗚В鐨勩€傝繕鏄笂闈㈢殑DEMO锛屾垜浠妸灏忔柟鍧楁崲鎴愪笁瑙掑舰锛屽湪椤甸潰涓婄粯鍒惰繍鍔ㄦ洸绾匡紝鍍忚繖鏍凤細鍏朵腑锛屼笁瑙掑舰鏄€氳繃clip-path瀹炵幇鐨勶細width:40px锛涢珮搴︼細40px锛涘壀杈戣矾寰勶細澶氳竟褰紙00銆?00%50%銆?100%锛夛紱鑳屾櫙锛氱嚎鎬ф笎鍙橈紙#fc0锛?f0c锛夛紱涓€鑸潵璇达紝鐗╀綋鐨勪腑蹇冪偣鏄部鐫€鏇茬嚎绉诲姩鐨勶紙绫绘瘮浜巘ransform-origin锛夛紝杩欓噷鎴戜滑鍙互閫氳繃offset-anchor鏉ユ敼鍙樼Щ鍔ㄧ殑閿氱偣锛屾瘮濡傛垜浠兂璁╀笁瑙掑舰鐨勫簳閮ㄦ部鐫€鏇茬嚎绉诲姩鏇茬嚎锛?ball{width:40px;楂樺害锛?0px锛涘壀杈戣矾寰勶細澶氳竟褰紙00銆?00%50%銆?100%锛夛紱offset-path:path('M1080C8010,13010,19080S300150,36080');鍋忕Щ閿氱偣锛?100%锛涜儗鏅細绾挎€ф搴︼紙#fc0锛?f0c锛夛紱鍔ㄧ敾锛氱Щ鍔?000ms鏃犻檺浜ゆ浛绾挎€э紱}@keyframes绉诲姩{0%{offset-distance:0%;}100%{鍋忕Щ璺濈锛?00%锛泒}缁忚繃瀹炴祴锛孋aniuse璇磑ffset-anchor灞炴€х殑鍏煎鎬ф槸Chrome79+鍜孎irefox72+锛屼絾瀹為檯涓婂彧鏈塅irefox鏀寔锛屾殏鏃朵笉鑳藉湪Chrome涓嬬敓鏁堛€傚畬鏁寸殑demo鍙互鐐硅繖閲岋細CodePenDemo--CSSMotionPathoffset-AnthorDemo浣跨敤MotionPath鍒朵綔鍔ㄧ敾鏁堟灉OK銆傛垜浠熀鏈笂宸茬粡閫氳繃浜嗕笂闈㈢殑鍘熺悊銆傝鎴戜滑鐪嬬湅濡備綍鍦ㄥ疄璺典腑浣跨敤杩愬姩璺緞銆備娇鐢ㄨ繍鍔ㄨ矾寰勫埗浣滄寜閽晥鏋滀娇鐢ㄨ繍鍔ㄨ矾寰勶紝鎴戜滑鍙互鍒朵綔涓€浜涚畝鍗曠殑鎸夐挳鐐瑰嚮鏁堟灉銆備箣鍓嶅湪CodePen涓婄湅鍒拌繃杩欐牱涓€涓寜閽偣鍑绘晥鏋滐細鍘熺悊鏄埄鐢╞ackground-radial鐢熸垚姣忎釜灏忓渾鐐癸紝閫氳繃鎺у埗background-position鏉ユ帶鍒跺皬鍦嗙偣鐨勪綅绉汇€傝缁嗙殑Demo浠ｇ爜浣犲彲浠ョ偣鍑昏繖閲岋細CodePenDemo--Bubblybutton(DesignbyGalShir)锛屼絾鏄皬鍦嗙偣鐨勮繍鍔ㄨ矾寰勫熀鏈笂鏄竴鏉＄洿绾裤€備娇鐢ㄦ湰鏂囦腑鐨凪otionPath锛屾垜浠篃鍙互瀹炵幇涓€浜涚被浼肩殑鏁堟灉銆傛牳蹇冧唬鐮佸涓嬶紝杩欓噷鐨凥TML鎴戜滑浣跨敤浜哖ug妯℃澘锛孋SS浣跨敤浜哠ASS锛?btn-for(vari=0;i<60;i++)span.dot.btn{position:relative;濉厖锛?.5rem4.5rem;}.btn.dot{浣嶇疆锛氱粷瀵?瀹藉害锛?px锛涢珮搴︼細4px锛汙for$i浠?鍒?count{&:nth-child(#{$i}){top:50%;宸︼細50%锛涜浆鎹細translate3d(-50%,-50%,0)rotate(#{360/$count*$i}deg);}}&::before{鍐呭锛氣€溾€濓紱浣嶇疆锛氱粷瀵癸紱椤堕儴锛?锛涘乏锛?锛涘搴︼細4px锛涢珮搴︼細4px锛涜竟鐣屽崐寰勶細50%锛涘亸绉昏矾寰勶細璺緞锛堚€淢01c7.1010.7214.34s7.1414.3410.7-214.3-47.2-414.3-410.7214.347.1414.3410.7-214.3-47.1-414.3-410.7214.347.1414.3410.7-214.3-47.1-414.3-410.7214.347.1414.3");offset-distance:0;}}.btn.is-animating:active.dot:nth-child(4n+1)::before{animation:dotvar(--animation-time)var(--animation-timging-function);}.btn.is-animating:active.dot:nth-child(4n+2)::before{border:1pxsolidvar(--color-primary);鑳屾櫙锛氶€忔槑锛涘姩鐢伙細鐐箆ar(--animation-time)var(--animation-timging-function)0.1s;}.btn.is-animating:active.dot:nth-child(4n+3)::before{animation:dotvar(--animation-time)var(--animation-timging-function)0.2s;}.btn.is-animating:active.dot:nth-child(4n)::before{border:1pxsolidvar(--color-primary);background:transparent;animation:dotvar(--animation-time)var(--animation-timging-function)0.3s;}@keyframesdot{0%{鍋忕Щ璺濈锛?%锛涗笉閫忔槑搴︼細1;}90%{offset-distance:60%;opacity:.5;}100%{offset-distance:100%;opacity:0;}}铏界劧浠ｇ爜鏈夌偣澶嶆潅锛屼絾涓嶉毦鐞嗚В锛屾湰璐ㄥ氨鏄负姣忎釜瀛愬厓绱犺缃浉鍚岀殑offset-path:path()锛屼负涓嶅悓缁勪笅鐨勫瓙鍏冪礌璁剧疆涓嶅悓鐨勬棆杞搴︼紝浣跨敤鍔ㄧ敾寤惰繜鍔ㄧ敾-delay璁剧疆浜?缁勫悓鏃跺紑濮嬬殑鍔ㄧ敾銆傝繖閲屾垜浠殑杞ㄨ抗璺緞涓嶆槸涓€鏉＄洿绾裤€傛晥鏋滃涓嬶細瀹屾暣浠ｇ爜鍙互鐐硅繖閲岋細CodePenDemo--ButtonAnimationwithCSSOffsetPaths浣跨敤Motion-Path缁樺埗鍦板浘璺緞Pathfinding鍔ㄧ敾杩欎釜涔熷緢瀹炵敤锛岀幇鍦ㄦ垜浠彲浠ュ畬鍏ㄤ娇鐢–SSMotion浜?Path鍦ㄥ湴鍥句笂瀹炵幇瀵昏矾鍔ㄧ敾锛氭湰Demo婧愯嚜AhmadEmran锛屽畬鏁翠唬鐮佸彲鐐瑰嚮锛欳odePenDemo--CodePenHomeAnimationwithoffset-path|浠呬娇鐢–SS&HTML浣跨敤Motion-Path缁樺埗璺緞鍔ㄧ敾鎴栬€咃紝鎴戜滑鍙互浣跨敤Path缁樺埗浠绘剰璺緞鏉ュ疄鐜版垜浠兂瑕佺殑鍚勭璺緞锛屾瘮濡傚湪璐墿杞︿腑娣诲姞鎶涚墿绾匡紝鎴栬€呭悇绉嶈繍鍔ㄨ建杩癸紝杩欐槸鍙︿竴涓紨绀猴細CodePenDemo--CSSMotionPathoffset-pathanimationCaniUse-Motion-PathtoseehowcompatibleMotion-Pathcurrently?鎴嚦2021-04-27銆傝兘鍚︿娇鐢?Motion-Path锛氱洰鍓嶉櫎IE娴忚鍣ㄥ锛屾鍦ㄧ瓑寰匰afari鍏煎锛屾槸鍚︿娇鐢ㄥ彇鍐充簬鐩爣浜虹兢鐨勬祻瑙堝櫒浣跨敤鎯呭喌銆傛渶鍚庯紝鏈枃鍒版缁撴潫銆備粙缁嶄簡杩愬姩璺緞鍔ㄧ敾MotionPath锛屽苟鐢ㄥ畠瀹炵幇浜嗕竴浜涗互寰€涓嶅鏄撳疄鐜扮殑璺緞鍔ㄧ敾鏁堟灉銆傚笇鏈涘浣犳湁鎵€甯姪锛氾級濡傛灉浣犳兂鑾峰彇鏈€鏈夎叮鐨凜SS璧勬枡锛岃涓嶈閿欒繃鎴戠殑鍏紬鍙封€斺€攊CSS鍓嶇瓒ｉ椈馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github--iCSS锛屼笉鏂洿鏂般€傛杩庣偣涓槦鏍囪闃呮敹钘忋€傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
