宸х敤 filter 鍜?transform-style 灞炴€у垱寤鸿瑙?3D 鐗规晥

鏈枃灏嗕粙缁嶅阀鐢ㄦā绯婂疄鐜拌瑙?3D 鏁堟灉鐨勬妧宸э紝鐪嬬湅鍒╃敤filter 鍜?transform-style 灞炴€ф€庝箞瀹炵幇瑙嗚 3D 鐗规晥锛屽笇鏈涘澶у鏈夋墍甯姪锛?/p>

鎴戜滑閮界煡閬擄紝鍦ㄦ甯哥殑瑙嗚鏁堟灉涓紝绂绘垜浠秺杩戠殑閫氬父鎴戜滑浼氱湅鐨勮秺娓呮櫚锛岃€岀鎴戜滑杈冭繙鍒欑浉瀵规病閭ｄ箞娓呮櫚~

鎴戜滑鍙互鍒╃敤娓呮櫚涓?strong>妯＄硦涓ょ鐘舵€佹潵鏋勫缓瑙嗗樊鏁堟灉銆傚儚鏄繖鏍凤細

鑰屽湪 CSS 涓紝鎴戜滑鍙互鍒╃敤妯＄硦婊ら暅 filter: blur() 涓?transform-style: preserve-3d 鏉ュ疄鐜板畠浠€?/p>

瀹炵幇涓€涓枃瀛楃殑 3D 鍙樻崲

棣栧厛锛屾垜浠渶瑕佸疄鐜颁竴涓枃瀛楃殑 3D 鍙樻崲锛岃繖涓瘮杈冪畝鍗曘€備富瑕佹槸鍊熷姪 transform-style: preserve-3d 鍜?perspective锛屼互鍙婅鏂囧瓧缁?Y 杞磋繘琛屾棆杞嵆鍙€?/p>

绠€鍗曠殑浠ｇ爜濡備笅锛?/p>

<p>CSS3DEFFECT</p>

body {     perspective: 160vmin; }  p {     font-size: 24vmin;     transform-style: preserve-3d;     animation: rotate 10s infinite ease-in-out; }  @keyframes rotate {     0% {         transform: rotateY(-45deg);     }     50% {         transform: rotateY(45deg);     }     100% {         transform: rotateY(-45deg);     } }

鎴戜滑灏卞彲浠ュ緱鍒拌繖鏍蜂竴涓?3D 鏂囧瓧鏁堟灉锛?/p>

瀹炵幇鏂囧瓧鐨勬ā绯?/h2>

杩欎釜鏁堟灉宸茬粡鏈変簡鍒濇鐨?3D 鏁堟灉锛屼絾鏄粎浠呮槸杩欐牱锛屼細瑙夊緱灏戜簡浜涗粈涔堛€傛帴涓嬫潵鎴戜滑灏遍渶瑕佽ˉ鍏呬竴涓嬫ā绯婄殑鏁堟灉锛岃璺濈鎴戜滑杩戠殑鏂囧瓧娓呮櫚锛岃繙绂绘垜浠殑鏂囧瓧妯＄硦銆?/p>

浣嗚繖鏍峰氨闇€瑕佸姣忎釜鏂囧瓧杩涜绮剧粏鍖栧鐞嗭紝涓婇潰鐨?HTML 缁撴瀯鏃犳硶鍋氬埌瀵规瘡涓€涓枃瀛楃殑鍗曠嫭澶勭悊锛屾垜浠畝鍗曟敼閫犱竴涓嬬粨鏋勶細

<p>     <span>C</span>     <span>S</span>     <span>S</span>     <span>3</span>     <span>D</span>     <span>E</span>     <span>F</span>     <span>F</span>     <span>E</span>     <span>C</span>     <span>T</span> </p>

瀹屾暣鐨勪唬鐮佸ぇ姒傛槸杩欐牱锛?/p>

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');  $count: 12;  body, html {     font-family: 'Lobster', cursive;     perspective: 160vmin;     overflow: hidden; }  p {     margin: auto;     font-size: 24vmin;     transform-style: preserve-3d;     animation: rotate 10s infinite ease-in-out;          span {         text-shadow:              1px 1px 0 rgba(0, 0, 0, .9),             2px 2px 0 rgba(0, 0, 0, .7),             3px 3px 0 rgba(0, 0, 0, .5),             4px 4px 0 rgba(0, 0, 0, .3),             5px 5px 0 rgba(0, 0, 0, .1);                  &:nth-child(-n+5) {              animation-delay: -5s;          }     } }  @for $i from 1 to 7 {     span:nth-child(#{$i}),      span:nth-last-child(#{$i}) {         animation: filterBlur-#{$i} 10s infinite ease-in-out;     }      @keyframes filterBlur-#{$i} {         0% {             filter: blur(0px) contrast(5);         }         50% {             filter: blur(#{7 - $i}px) contrast(1);         }         100% {             filter: blur(0px) contrast(5);         }     } } @keyframes rotate {     0% {         transform: rotateY(-45deg);     }     50% {         transform: rotateY(45deg);     }     100% {         transform: rotateY(-45deg);     } }

绠€鍗曡В鏋愪笅锛岃繖閲屾湁鍑犱釜灏忔妧宸э紝浠旂粏瑙傚療鎴戜滑闇€瑕佺殑鏁堟灉锛?/p>

1. 绗竴涓瓧绗﹀拰鏈€鍚庝竴涓瓧绗﹀湪鏃嬭浆鐨勬渶宸︽晥鏋滃拰鏈€鍙虫晥鏋滀笅鍒嗗埆浼氱鎴戜滑鏈€杩戝拰鏈€杩滐紝瀹冧滑鐨勬晥鏋滃叾瀹炲簲璇ユ槸涓€鑷寸殑锛屾墍浠ョ涓€涓瓧绗﹀拰鏈€鍚庝竴涓瓧绗﹀簲璇ョ粺涓€澶勭悊锛屼緷娆＄被鎺紝绗簩涓瓧绗﹀拰鍊掓暟绗簩瀛楃缁熶竴澶勭悊锛岃繖閲屽彲浠ュ€熷姪 SASS 鍒╃敤 :nth-child 鍜?:nth-last-child 楂樻晥缂栧啓 CSS 浠ｇ爜
2. 姣忔鏈変竴鍗婃槸娓呮櫚鐨勶紝涓€鍗婄殑鏄ā绯婄殑锛岄渶瑕佸尯鍒嗗寰咃紝鍒╃敤 animation-delay 璁╀竴鍗婄殑鍔ㄧ敾寤惰繜涓€鍗婅繘琛?/li>
3. 鍙互鍐嶉厤鍚?text-shadow 璁╂枃瀛楁洿绔嬩綋鐐?/li>

杩欐牱锛屾垜浠彲浠ユ渶缁堝緱鍒板涓嬫晥鏋滐細

瀹屾暣鐨勪唬鐮侊紝浣犲彲浠ユ埑杩欓噷 —便宜美国vps CSS 鐏垫劅 — 鍒╃敤 filter:blur 澧炲己鏂囧瓧鐨?3D 鏁堟灉

https://csscoco.com/inspiration/#/./filter/use-filter-blur-enhance-text-3d-effect

浣跨敤妯＄硦鏋勫缓钀藉彾鏁堟灉

鍚堢悊杩愮敤妯＄硦锛屾槸鑳藉湪娌℃湁 transform-style: preserve-3d 鍜?perspective 鐨勫姞鎸佷笅锛屼篃鑳芥瀯寤哄嚭涓嶉敊鐨?3D 鏁堟灉銆?/p>

璀涓嬮潰杩欎釜钀藉彾鏁堟灉锛屽氨鏄埄鐢ㄦā绯婁互鍙婄畝鍗曠殑灞傜骇鍏崇郴锛岃鏁翠釜鐢婚潰鐪嬩笂鍘婚潪甯哥殑鐪熷疄锛?/p>

<h2>Falling Leaves</h2> <section>   <div class="leaf">     <div><img src="钀藉彾鍥剧墖.png" /></div>     <div><img src="钀藉彾鍥剧墖.png" /></div>     <div><img src="钀藉彾鍥剧墖.png" /></div>     <div><img src="钀藉彾鍥剧墖.png" /></div>     <div><img src="钀藉彾鍥剧墖.png" /></div>     <div><img src="钀藉彾鍥剧墖.png" /></div>     <div><img src="钀藉彾鍥剧墖.png" /></div>   </div>   <div class="leaf leaf2">     // 閲嶅绗簩缁?  </div>   <div class="leaf leaf3">     // 閲嶅绗笁缁?  </div> </section>

.leaf {   position: absolute;   width: 100%;   height: 100%;   top: 0;   left: 0; } .leaf img {   width: 75px;   height: 75px; } .leaf div:nth-child(1) {   left: 20%;   animation: fall 22s linear infinite;   animation-delay: -2s; } .leaf div:nth-child(2) {   left: 70%;   animation: fall 18s linear infinite;   animation-delay: -4s; } .leaf div:nth-child(3) {   left: 10%;   animation: fall 21s linear infinite;   animation-delay: -7s; } .leaf div:nth-child(4) {   left: 50%;   animation: fall 24s linear infinite;   animation-delay: -5s; } .leaf div:nth-child(5) {   left: 85%;   animation: fall 19s linear infinite;   animation-delay: -5s; } .leaf div:nth-child(6) {   left: 15%;   animation: fall 23s linear infinite;   animation-delay: -10s; } .leaf div:nth-child(7) {   left: 90%;   animation: fall 20s linear infinite;   animation-delay: -4s; } .leaf2 {   transform: scale(1.6) translate(5%, -5%) rotate(15deg);   filter: blur(1px);   z-index: 10; } .leaf3 {   filter: blur(2px);   transform: scale(0.8) translate(-5%, 10%) rotate(170deg); } @keyframes fall {   0% {     top: -30%;     transform: translateX(20px) rotate(0deg);   }   20% {     transform: translateX(-20px) rotate(45deg);   }   40% {     transform: translateX(20px) rotate(90deg);   }   60% {     transform: translateX(-20px) rotate(135deg);   }   80% {     transform: translateX(20px) rotate(180deg);   }   100% {     top: 150%;     transform: translateX(-20px) rotate(225deg);   } }

涓昏灏辨槸閫氳繃娓呮櫚涓?strong>妯＄硦涓ょ鐘舵€佺殑瀵规瘮锛岄€熷害鐨勫樊寮傦紝鏉ユ瀯寤鸿宸晥鏋溿€?/p>

CodePen Demo — Falling leaves

https://codepen.io/Chokcoco/pen/vYyGVZZ

鏈€鍚?/h2>

濂戒簡锛屾湰鏂囧埌姝ょ粨鏉燂紝甯屾湜瀵逛綘鏈夊府鍔?馃檪

鏈枃鏉ユ簮缃戠珯锛歩nfo110.com锛岃嫢渚垫潈锛岃鑱旂郴鍒犻櫎銆?/p>