鏈枃灏嗕粙缁嶅阀濡欏埄鐢ㄦā绯婂疄鐜拌瑙?D鏁堟灉鐨勬妧宸с€傛垜浠兘鐭ラ亾锛屽湪姝ｅ父鐨勮瑙夋晥鏋滀腑锛岄€氬父绂绘垜浠秺杩戠湅寰楄秺娓呮锛岃€岀鎴戜滑瓒婅繙鍒欑浉瀵硅秺涓嶆竻鏅皛鎴戜滑鍙互鍒╃敤娓呮櫚鍜屾ā绯婄殑鐘舵€佹潵鍒朵綔瑙嗗樊鏁堟灉銆傚儚杩欐牱锛氬湪CSS涓紝鎴戜滑鍙互鐢ㄦā绯婃护闀渇ilter:blur()鍜宼ransform-style:preserve-3d鏉ュ疄鐜板畠浠€傚疄鐜版枃瀛楃殑3D鍙樻崲棣栧厛锛屾垜浠瀹炵幇鏂囧瓧鐨?D鍙樻崲锛屾瘮杈冪畝鍗曘€備富瑕佷娇鐢╰ransform-style:preserve-3d鍜宲erspective锛岃鏂囧瓧缁昚杞存棆杞€傜畝鍗曚唬鐮佸涓嬶細
CSS3DEFFECT
body{perspective:160vmin;}p{font-size:24vmin;鍙樻崲鏍峰紡锛氫繚鐣?d锛涘姩鐢伙細鏃嬭浆10s鏃犻檺缂撳叆缂撳嚭锛泒@keyframesrotate{0%{transform:rotateY(-45deg);}50%{鍙樻崲锛歳otateY(45deg);}100%{鍙樻崲锛歳otateY(-45deg);}}鎴戜滑鍙互寰楀埌杩欐牱涓€涓?D鐨勬枃瀛楁晥鏋滐細瀹炵幇鏂囧瓧鐨勬ā绯婃晥鏋滐紝宸茬粡鏈変簡鍒濇鐨?D鏁堟灉锛屼絾鏄氨杩欐牱锛屼綘浼氳寰楀皯浜嗙偣浠€涔堛€傛帴涓嬫潵锛屾垜浠渶瑕佹坊鍔犱竴涓ā绯婃晥鏋滐紝璁╃鎴戜滑杩戠殑鏂囧瓧娓呮櫚锛岀鎴戜滑杩滅殑鏂囧瓧妯＄硦銆備絾杩欐牱涓€鏉ワ紝姣忎竴鏉℃枃瀛楅兘闇€瑕佺簿缁嗗鐞嗐€備笂杩癏TML缁撴瀯鏃犳硶鍗曠嫭澶勭悊姣忎釜鏂囨湰銆傛垜浠畝鍗曚慨鏀逛竴涓嬬粨鏋勶細CSS3DEFF>ECT
瀹屾暣鐨勪唬鐮佸ぇ姒傛槸杩欐牱鐨勶細@importurl('https://fonts.googleapis.com/css2?family=Lobster&display=swap');$count:12;body,html{font-family:'Lobster',鑽変功;瑙嗚锛?60vmin锛涙孩鍑猴細闅愯棌锛泒p{淇濊瘉閲戯細鑷姩锛涘瓧浣撳ぇ灏忥細24vmin锛涘彉鎹㈡牱寮忥細淇濈暀3d锛涘姩鐢伙細鏃嬭浆10绉掓棤闄愮紦鍏ョ紦鍑猴紱span{鏂囨湰闃村奖锛?px1px0rgba(0,0,0,.9),2px2px0rgba(0,0,0,.7),3px3px0rgba(0,0,0,.5),4px4px0rgba(0,0,0,.3),5px5px0rgba(0,0,0,.1);&:nth-child(-n+5){鍔ㄧ敾寤惰繜锛?5s;}}}@for$ifrom1to7{span:nth-child(#{$i}),span:nth-last-child(#{$i}){animation:filterBlur-#{$i}10s鏃犻檺缂撳叆缂撳嚭锛泒@keyframesfilterBlur-#{$i}{0%{filter:blur(0px)contrast(5);}50%{杩囨护鍣細妯＄硦锛?{7-$i}px锛夊姣旓紙1锛夛紱}100%{婊ら暅锛氭ā绯婏紙0px锛夊姣旓紙5锛夛紱}}}@keyframes鏃嬭浆{0%{鍙樻崲锛歳otateY(-45deg);}50%{鍙樻崲锛歳otateY(45deg);}100%{鍙樻崲锛歳otateY(-45deg);}}绠€鍗曞垎鏋愪笅锛岃繖閲屾湁鍑犱釜灏忔妧宸э紝浠旂粏瑙傚療鎴戜滑闇€瑕佺殑鏁堟灉锛氱涓€涓瓧绗﹀拰鏈€鍚庝竴涓瓧绗﹀湪鏃嬭浆鐨勬渶宸﹀拰鏈€鍙虫晥鏋滀笅浼氬垎鍒鎴戜滑鏈€杩戝拰鏈€杩溿€傚畠浠殑鏁堟灉鍏跺疄搴旇鏄竴鏍风殑锛屾墍浠ョ涓€涓瓧绗﹀拰鏈€鍚庝竴涓瓧绗﹀簲璇ョ粺涓€瀵瑰緟銆備互姝ょ被鎺紝绗簩涓瓧绗﹀拰鍊掓暟绗簩涓瓧绗︾粺涓€澶勭悊銆傚湪杩欓噷锛屼綘鍙互浣跨敤SASS鏉ヤ娇鐢?nth-child鍜?nth-last-child鏉ラ珮鏁堝湴缂栧啓CSS浠ｇ爜銆傛瘡娆℃湁涓€鍗婃竻鏅帮紝涓€鍗婃ā绯娿€傚尯鍒寰咃紝浣跨敤animation-delay鏉ュ欢杩熶竴鍗婄殑鍔ㄧ敾锛屼竴鍗婂彲浠ョ粨鍚坱ext-shadow璁╂枃瀛楁洿鏈夌珛浣撴劅銆傝繖鏍凤紝鎴戜滑鏈€缁堝彲浠ュ緱鍒板涓嬫晥鏋滐細瀹屾暣浠ｇ爜锛屽彲浠ョ偣鍑昏繖閲屸€斺€擟SS鐏垫劅鈥斺€斾娇鐢╢ilter:blurenhancetext3D鏁堟灉浣跨敤妯＄硦鏉ユ瀯寤鸿惤鍙舵晥鏋溿€傚悎鐞嗕娇鐢╞lur鍙互鍦ㄦ病鏈塼ransform-style:preserve-3d鍜宲erspective鍔犳寔鐨勬儏鍐典笅鎵撻€犲嚭涓嶉敊鐨?D鏁堟灉渚嬪涓嬮潰鐨勮惤鍙舵晥鏋滐紝浣跨敤妯＄硦鍜岀畝鍗曠殑灞傜骇鍏崇郴锛岃鏁翠釜鐢婚潰鐪嬭捣鏉ラ潪甯哥湡瀹烇細