当前位置：首页 > Web前端 > HTML

惊人的！使用CSS视差实现炫酷的交互效果

时间：2023-03-28 12:35:12 HTML

鏈枃灏嗕粙缁嶄竴涓娇鐢–SS瀹炵幇婊氬姩瑙嗗樊鏁堟灉鐨勫皬鎶€宸э紝骞跺埄鐢ㄨ鎶€宸у埗浣滀竴浜涙湁瓒ｇ殑浜や簰鐗规晥銆傚叧浜庡埄鐢–SS瀹炵幇婊氬姩瑙嗗樊鏁堟灉锛屼箣鍓嶆湁涓€绡囨枃绔犺缁嗕粙缁嶄簡鍏蜂綋鐨勮В鍐虫柟妗堚€斺€擟SS瀹炵幇瑙嗗樊鏁堟灉銆傛湁鍏磋叮鐨勫悓瀛﹀彲浠ュ厛鐪嬬湅杩欑瘒鏂囩珷銆傝繖閲屼細鐢ㄥ埌杩欐牱涓€涓函CSS鐨勮宸妧鏈細浣跨敤transform:translate3d瀹炵幇婊氬姩瑙嗗樊杩欓噷浣跨敤CSS3D鏉ュ疄鐜版粴鍔ㄨ宸晥鏋溿€傚師鐞嗘槸锛氭垜浠粰瀹瑰櫒璁剧疆transform-style:preserve-3d鍜宲erspective:xpx锛岄偅涔堣繖涓鍣ㄤ腑鐨勫瓙鍏冪礌灏变細浣嶄簬3D绌洪棿锛岀劧鍚庣粰瀛愬厓绱犺缃笉鍚岀殑transform:translateZ()銆傛鏃讹紝涓嶅悓鐨勫厓绱犲湪3DZ杞存柟鍚戜笂绂诲睆骞曪紙鎴戜滑鐨勭溂鐫涳級鐨勮窛绂讳笉鍚屻€傛粴鍔ㄦ粴鍔ㄦ潯锛屽洜涓哄瓙鍏冪礌璁剧疆浜嗕笉鍚岀殑transform:translateZ()锛岄偅涔堝畠浠笂涓嬫粴鍔ㄧ殑璺濈translateY鏄浉瀵逛簬灞忓箷锛堟垜浠殑鐪肩潧锛夛紝涔熸槸涓嶅悓鐨勶紝杩欐牱灏辫揪鍒颁簡婊氬姩瑙嗗樊鐨勬晥鏋溿€傚叧浜巘ransform-style锛歱reserve-3d鍜宲erspective鏈枃涓嶅睍寮€澶绡囧箙銆傝鑰呴粯璁ゆ槸鏈変竴瀹氫簡瑙ｇ殑锛屼笉鏄壒鍒竻妤氥€備綘鍙互鍏堜簡瑙ｄ竴涓婥SS3D銆傛牳蹇冧唬鐮佽〃绀轰负锛?divclass="g-container">translateZ(-1)

translateZ(-2)

translateZ(-3)

html{height:100%;婧㈠嚭锛氶殣钘忥紱}姝ｆ枃{閫忚锛?px锛涘彉鎹㈡牱寮忥細淇濈暀-3d锛涢珮搴︼細100%锛涙孩鍑?y锛氭粴鍔紱overflow-x:hidden;}.g-container{height:150%;:骞崇ЩZ(-2px);}.section-three{鍙樻崲锛歵ranslateZ(-3px);}}鎬荤粨灏辨槸鐖跺厓绱犺缃簡transform-style:preserve-3d鍜宲erspective:1px锛屽瓙鍏冪礌璁剧疆浜嗕笉鍚岀殑transform:translateZ锛宻crollingScrollbar锛屾晥鏋滃涓嬶細CodePenDemo--CSS3D瑙嗗樊鏄庢樉锛屽綋婊氬姩鏉℃粴鍔ㄦ椂锛屼笉鍚屽瓙鍏冪礌鐨勪綅绉荤▼搴﹀湪瑙嗚涓婃槸涓嶅悓鐨勶紝杈惧埌鎵€璋撶殑婊氬姩瑙嗗樊鏁堟灉銆傚€熷姪CSS瑙嗗樊瀹炵幇鐐叿鐨勪氦浜掑姩鐢绘晥鏋淥K锛屾湁浜嗕笂闈㈢殑閾哄灚锛屾垜浠潵鐪嬬湅杩欎袱涓湁瓒ｇ殑浜や簰鏁堟灉鍚с€傜敱wheatup鍙嬫儏鎻愪緵锛岀兢鍐呮棩鏈嶉寮犳埅鍥俱€傚厛鐪嬬涓€涓晥鏋滐細鏁堟灉鏄枃瀛椾互涓嶅悓楂樺害灞傚眰浜ゆ浛鏄剧ず锛屾粴鍔ㄨ繃绋嬩腑浼氭湁鏄庢樉鐨?D瑙嗗樊鏁堟灉銆傝繖涓晥鏋滀笉闅撅紝鏍稿績鍦ㄤ簬锛氫娇鐢╰ransform-style:preserve-3d鍜宲erspective鏋勫缓涓嶅悓鐨勫浘灞傛晥鏋滐紝鍒朵綔瑙嗗樊鏁堟灉浣跨敤::before,::after鐨勫厓绱犳瀯寤?D鏁堟灉鎴戜滑鏉ョ湅涓€涓渶灏忓寲鐨勬紨绀猴細

.g-瀹瑰櫒{楂樺害锛?50vh锛涢€忚鍥撅細600px锛泒.g-box{瀹藉害锛?00px锛涢珮搴︼細200px锛涜儗鏅細#999锛涘彉鎹㈡牱寮忥細淇濈暀3d锛?::before,&::after{鍐呭:"";浣嶇疆锛氱粷瀵癸紱鍙筹細0锛涘乏锛?锛涘彉鎹㈡牱寮忥細淇濈暀3d锛涢珮搴︼細200px锛涜儗鏅壊锛?ccc锛泒&::before{transform-origin:topcenter;椤堕儴锛?锛涘彉鎹細鏃嬭浆X锛?90搴︼級锛泒&::after{transform-origin:bottomcenter;搴曢儴锛?锛涘彉鎹細鏃嬭浆X锛?0搴︼級锛泒}婊氬姩g-container瀹瑰櫒锛屼竴涓?D鏁堟灉锛氱敱浜庤繕闇€瑕佽宸晥鏋滐紝鎵€浠ユ垜浠渶瑕佺粰涓嶅悓鐨勫眰鍒嗛厤涓嶅悓鐨則ranslateZ()銆傛垜浠◢寰慨鏀逛竴涓嬩唬鐮侊紝鍦ㄦ瘡涓猤-box涓棿鍔犱竴灞傛櫘閫氱殑div锛岀劧鍚庣粰姣忎釜g-box鐩掑瓙鍔犱笂涓€涓猼ranslateZ()

.g-container{width:400px;楂樺害锛?50vh锛涢€忚锛?00px;}.g-normal{瀹藉害锛?00px;楂樺害锛?00px锛涜儗鏅細#666锛涘彉鎹㈡牱寮忥細淇濈暀3d锛泒.g-box{瀹藉害锛?00px锛涢珮搴︼細200px锛涜儗鏅細#999锛涳細淇濈暀-3d锛涜浆鎹細translate3d(0,0,200px);&::before,&::after{//...淇濇寔涓嶅彉}}鐢变簬g-box鍜実-normal鐨則ranslateZ鍊间笉鍚岋紝鎵€浠ュ湪婊氬姩鏃朵細鏈夎宸晥鏋滅敱浜巊-鐨則ranslateZ鍊糱ox涓簍ranslateZ(200px)锛屼袱涓吉鍏冪礌鐨剅otateX姝ｈ礋90deg锛岄珮搴︿负200px锛屾墍浠-box鍜実-normal鍙互鍒氬ソ閫氳繃g-box鐨勪袱涓吉鍏冪礌鐩歌繛涓€璧凤紝鏁堟灉濡備笂鍥撅細DEMO瀹屾暣浠ｇ爜锛欳odePenDemo-3DParallaxScrollCSS婊氬姩瑙嗗樊鍔ㄧ敾2OK锛屼笅闈㈢浜屼釜婊氬姩瑙嗗樊鍔ㄧ敾涔熷緢鏈夋剰鎬濓紝鎯崇湅鍘熺増锛屼篃鏉heatup鐨凜odePen锛欳odePenDemo--3DChatViewer杩欓噷鐨勬牳蹇冭繕鏄埄鐢ㄤ簡CSS3D鐨勮兘鍔涳紝浣嗘槸鐢变簬浣跨敤浜嗘粴鍔ㄦ潵瑙﹀彂鍔ㄧ敾鏁堟灉锛屽苟涓旀湁涓€瀹氱殑浠庢ā绯婂埌娓呮櫚鐨勬贰鍏ユ晥鏋滐紝鎵€浠ヨ繕鏄湁涓€涓鏋滀綘瀵笿avaScript浠ｇ爜鎰熷叴瓒ｏ紝鍙互鐪嬬湅涓婇潰鐨勬簮浠ｇ爜銆傛湰鏂囧皢灏濊瘯浣跨敤CSS鐨凘Property鍜孋SS鐨勬渶鏂扮壒鎬scroll-timeline鏉ヨ繕鍘烰avaScript瀹炵幇鐨勯儴鍒嗘晥鏋溿€傚綋鐒讹紝鏃犺鏄惁浣跨敤JavaScript锛屾牳蹇?D閮ㄥ垎棣栧厛浣跨敤CSS銆傛垜浠鍏堥渶瑕佽繖鏍蜂竴涓粨鏋勶細

//...閲嶅N娆?/div>.g-wrapper{width:100vw;楂樺害锛?00vh锛泒.g-inner{浣嶇疆锛氱浉瀵癸紱楂樺害锛?00%锛涙樉绀猴細寮规€э紱寮规€ф柟鍚戯細鍒楋紱璇佹槑鍐呭锛氬眳涓紱瀵归綈椤圭洰锛氬眳涓紱gap:10px;}.g-item{width:300px;楂樺害锛?00px锛沚ackground:#000;}澶ф鏄繖鏍风殑鏁堟灉锛氱劧鍚庯紝鎴戜滑娣诲姞涓€浜汣SS3D杞崲锛?g-wrapper{//...鍚屼笂perspective:200px;transform-style:preserve-3d;}.g-inner{//...鍚屼笂淇濇寔涓€鑷磘ransform-style:preserve-3d;杞崲锛歵ranslateY(calc(-50%+100px))translateZ(0)rotateX(90deg);transform-origin:bottomcenter;}鍙互寰楀埌杩欐牱鐨勯€忚鏁堟灉锛氱敱浜庡鍣╣-inner缁昘杞磋繘琛?0deg缈昏浆锛屽嵆rotateX(90deg)锛屾垜浠粰g-item鍙嶅悜鏃嬭浆骞剁炕杞崱鐗囪儗闈細.g-wrapper{//..涓庝笂闈㈢殑浠ｇ爜pers涓€鑷撮鏈燂細200px锛泃ransform-style:preserve-3d;}.g-inner{//...鍜屼笂闈㈢殑浠ｇ爜涓€鑷磘ransform-style:preserve-3d;杞崲锛歵ranslateY(calc(-50%+100px))translateZ(0)rotateX(90deg);transform-origin:bottomcenter;}.g-item{//...鍜屼笂闈㈢殑浠ｇ爜涓€鑷磘ransform:rotateX(-90deg);}鍙互寰楀埌杩欐牱涓€涓€忚鐨勬晥鏋滐細姝ゆ椂锛屾垜浠粰瀹瑰櫒涓€涓猼ranslateZ鐨勫姩鐢伙細.g-inner{animation锛歮ove10sinfinitelinear;}@keyframesmove{100%{transform:translateY(calc(-50%+100px))translateZ(calc(100vh+120px))rotateX(90deg);}}杩欐牱锛屾暣涓姩鐢荤殑鍘熷瀷灏卞畬鎴愪簡銆傞€氳繃鎺у埗鐖跺厓绱犵殑閫忚澶у皬鍜屽鍣ㄧ殑translateZ锛屽緱鍒颁竴涓笉鏂Щ鍔ㄥ埌閫忚鍓嶆柟鐨勫姩鐢绘晥鏋滐細CodePenDemo--CSS3DEffectDemo缁撳悎CSS@scroll-timeline锛屼娇鐢–SS鏉ユ帶鍒舵粴鍔ㄥ拰鍔ㄧ敾锛岄偅涔堝浣曠敤CSS鎶婅繖涓姩鐢诲拰婊氬姩鎿嶄綔缁撳悎璧锋潵鍛紵鍓嶄笉涔呬粙缁嶈繃锛孋SS鐨勪竴涓噸纾呯壒鎬у氨鍦ㄨ繖閲屻€傜粓浜庢潵浜嗭紝鍔ㄧ敾鏉€鎵婡scroll-timeline锛屽彲浠ョ敤鏉ュ疄鐜癈SS鍔ㄧ敾鍜屾粴鍔ㄦ搷浣滅殑缁撳悎銆傝鎴戜滑鐢ㄥ畠鏉ヤ慨鏀逛唬鐮侊細

Loremipsumdolorsitametconsecteturadipisicingelit.//...閲嶅N涓?/div>@property--phase{syntax:'';inherits:false;鍒濆鍊硷細15px锛泒.g-scroll{瀹藉害锛?00%锛涢珮搴︼細1000vh锛泒.g-wrapper{浣嶇疆锛氬浐瀹氾紱瀹藉害锛?00vw锛涢珮搴︼細100vh锛涢€忚锛?00px锛涜浆鎹㈡牱寮忥細preserve-3d;}.g-inner{position:relative;height:100%;//鑺傜渷涓€浜沠lex甯冨眬浠ｇ爜锛屼笌涓婃枃涓€鑷磘ransform-style:preserve-3d;transform:translateY(calc(-50%+100px))translateZ(var(--phase))rotateX(90deg);transform-origin:bottomcenter;animation-name:move;animation-duration:1s;animation-timeline:box-move;}.g-item{width:300px;楂樺害锛?00px锛涢鑹诧細#fff锛涜儗鏅細#000锛涘彉鎹細rotateX(-90deg)锛泒@scroll-timelinebox-move{source:selector("#g-scroll");orientation:"vertical";}@keyframes绉诲姩{0%{--鐩镐綅锛?锛泒100%{--phase:calc(100vh+100px);}}鐩告瘮涓婇潰鐨凞EMO锛屾垜浠富瑕佹槸澧炲姞浜咢scroll-timeline鐨勪唬鐮侊紝鎴戜滑澧炲姞浜嗕竴涓秴闀跨殑container.g-scroll锛屽苟浣跨敤@scroll-timelinebox-move{}瑙勫垯灏嗗叾婊氬姩鍔ㄤ綔缁戝畾鍒癮nimation-timeline锛歜ox-move锛岃繖鏍锋垜浠氨鍙互浣跨敤婊氬姩鏉ヨЕ鍙慇keyframesmove{}CSS鍔ㄧ敾鏁堟灉濡備笅锛氬湪鍘熸潵鐨勬晥鏋滀腑锛岃繕鏈変竴浜涗娇鐢↗avaScript缁撳悎婊氬姩璺濈鎺у埗鐨勬ā绯婂彉鍖栥€傝繖涔熷彲浠ラ€氳繃浣跨敤backdrop-filter:blur()杞绘澗妯℃嫙銆傝鎴戜滑绠€鍗曞湴娣诲姞鍙︿竴灞俫-mask锛?divclass="g-scroll"id="g-scroll">

Loremipsumdolorsitametconsecteturadipisicingelit.//...閲嶅N//鍏朵粬涓嶅彉.g-mask{position:fixed;瀹藉害锛?00vw锛涢珮搴︼細100vh锛涜儗鏅护闀滐細妯＄硦锛?px锛夛紱transform:translateZ(0);}杩欐牱鍩烘湰杩樺師浜嗗師鏉ョ殑鏁堟灉锛岃€屾垜浠彧鐢–SS锛欳odePenDemo--PureCSSScrollAnimation2(ChromeOnly&&SupportScrollTimeline)鎬荤粨涓€涓嬶紝褰撶劧鍦ㄨ繖绡囨枃绔犵殑鏈€鍚庝竴涓晥鏋滐紝寰堝鐩墠鍏煎鎬у緢宸殑CSS浣跨敤浜嗗睘鎬э紝灏ゅ叾鏄疈scroll-timeline锛岃繕澶勪簬闈炲父鏃╂湡鐨勯樁娈碉紝鍏煎鎬ф槸绾㈣壊鐨勩€備絾鏄苟涓嶅Θ纰嶆垜浠涔犲拰鎰熷彈CSS鐨勭編濡欍€傝瀹屽叏鐞嗚В鏈枃锛屾偍鍙兘闇€瑕佷簡瑙ｄ竴浜涘墠缃煡璇嗐€傛牴鎹綘鐨勯渶瑕侊紝浣犲彲浠ヨ繘涓€姝ラ槄璇伙細CSS瀹炵幇瑙嗗樊鏁堟灉CSS@property锛岃涓嶅彲鑳芥垚涓哄彲鑳姐€傛潵浜嗭紝缁堜簬鏉ヤ簡锛屽姩鐢绘潃鎵婡scroll-timeline娣卞叆鎺㈣filter鍜宐ackdrop-filter鐨勫紓鍚屽ソ浜嗭紝鏈枃鍒版缁撴潫锛屽笇鏈涘浣犳湁鎵€甯姪:)濡傛灉浣犳兂鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂般€傛杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>

上一篇：vue-git

下一篇：【vue-router源码】十四、RouterView源码解析

惊人的！使用CSS视差实现炫酷的交互效果相关文章

最新推荐

猜你喜欢