鏈枃灏嗙敤绾疌SS甯︿綘涓€姝ユ瀹炵幇杩欐牱涓€涓骞讳汉鐗╄烦璺冪殑鑳屾櫙鍔ㄧ敾銆傜被浼艰繖鏍风殑瑙掕壊涓嬮洦鍔ㄧ敾锛氭垨鑰呯被浼艰繖鏍风殑涓滆タ锛?[CodePenHomeMatrixdigitalrain(animatedversion)Byyuanchuan](https://user-images.githubuse...鐢ㄤ簬涓€浜涚被浼兼妧鏈鏉愮殑鑳屾櫙涓婇潰锛屽緢鍑哄僵锛屾枃瀛楃珫鎺掔殑绗竴姝ュ氨鏄疄鐜版枃瀛楃殑绔栨帓锛氳繖涓€姝ュ緢绠€鍗曪紝鏂规硶鍙兘鏈夊緢澶氾紝杩欓噷鎴戠畝鍗曠綏鍒椾竴涓嬶細浣跨敤灞炴€у啓-mode鎺у埗鏂囧瓧鎺掑垪瀵逛簬control锛屽彲浠ラ€氳繃writing-mode:vertical-lr绛夋柟寮忚鏂囧瓧鍨傜洿鎺掑垪锛屼絾鏄浜庢暟瀛楀拰鑻辨枃锛屼細鏃嬭浆90掳鏄剧ず锛?p>1234567890ABC
涓枃鎴栧叾浠栧瓧绗︺偐銉?/p>p{writing-mode:vertical-lr;}褰撶劧杩欑鎯呭喌涓嬭嫳鏂囧瓧绗︾殑鏄剧ず涓嶈兘婊¤冻鎴戜滑鐨勯渶姹傘€傛帶鍒跺鍣ㄧ殑瀹藉害骞朵笖鎺у埗姣忚鍙兘鏄剧ず涓€涓眽瀛楋紝杩欎釜鏂规硶鏄渶绠€鍗曟柟渚跨殑鏂规硶d銆佷絾鏄敱浜庤嫳鏂囩殑鐗规畩鎬э紝鎴戜滑闇€瑕侀厤鍚堝垎璇嶏細break-all:p{width:12px;瀛椾綋澶у皬锛?0px锛泈ord-break:break-all;}鏁堟灉濡備笅锛屾弧瓒宠姹傦細涓轰簡璁╂垜浠殑鏁堟灉鏇磋嚜鐒讹紝浣跨敤CSS閫夋嫨闅忔満瀛楃涓层€傛瘡琛屼腑鐨勫瓧绗﹂€夋嫨鏈€濂芥槸闅忔満鐨勩€備絾鏄CSS瀹炵幇闅忔満鐢熸垚姣忎竴琛岀殑瀛楃澶毦浜嗐€傛墍浠ヨ繖閲岃鏉SS棰勫鐞嗗櫒SASS/LESS銆傜敱浜庝笉鍙兘浣跨敤CSS灏嗗瓧绗︽彃鍏ュ埌鍗曚釜鏍囩涓紝渚嬪
鏍囩锛屾垜浠皢鏍囩涓殑瀛楃鏄剧ず鍦ㄦ瘡涓?p>鍏冪礌鐨?:before浼厓绱犵殑鍐呭涓€傚湪姝や箣鍓嶏紝鎴戜滑宸茬粡鏈変簡涓€缁勫緢濂界殑缁勭鍙凤紝鐒跺悗鎴戜滑浣跨敤SASS鍑芥暟鐢熸垚姣忎釜涓昏鍏冪礌鐨勫唴閮ㄥ唴瀹癸紝濡備笅鎵€绀猴細
$str锛?瀵逛笉璧封梺鈻ｂ枻鈻モ枽鈻р檪鈾モ樆鈻衡梽鈻р枿Mamimumemoyuyowawoiewokakekukegakosasissessotatsuttetannanninenenohahifuhehoemamim澶囧繕褰昚owa銊呫剦銊撱剼銊劍銊嗐剨銊嶃剹銊с剾銊熴劊銊囥剫銊庛剫銊庛剳銊曘剺銊樸劏銊ㄣ劀銊溿劆銊犮劆銊ゃ劋銊ゃ劋銊ゃ剤銊堛剰銊掋剤銊忋剰銊掋剴銊掋剴銊掋剴銊掋剴銊栥剴銊掋剴銊?;$length:str-length($str);@functionrandomChar(){$r:random($length);@returnstr-slice($str,$r,$r);}@functionrandomChars($number){$value:'';}@if$number>0{@for$i浠?鍒?number{$value:$value+randomChar();}}@return$value;}p:nth-child(1)::before{content:randomChars(25);}p:nth-child(25)::before{content:randomChars(25);}p:nth-child(3)::before{鍐呭锛歳andomChars(25);,$length鏄剧ず瀛楃涓查暱搴andomChar()浣跨敤绫籗ASS鐨剅andom()鏂规硶锛屾瘡娆￠€夋嫨涓€涓?-$length-like鏍煎紡鏁板瓧锛屽嵆$r锛岄噸澶嶄娇鐢ㄧ被SASS鐨剆tr-slice鏂规硶锛屾瘡娆′粠$浠巗tr涓殢鏈洪€夋嫨涓€涓笅鏍囦负$r鐨勫瓧绗︺€俽andomChars()灏辨槸寰幆璋冪敤randomChar()鏂规硶锛屼粠$str涓殢鏈虹敓鎴愪竴涓插瓧绗︿覆銆傞暱搴︽槸浼犻€掔殑鍙傛暟$number銆傛瘡娆￠兘涓嶄竴鏍凤細褰撶劧鎴戣寰椾笂闈㈢殑鏂规硶涓嶆槸鏈€濂界殑锛孋SS浼厓绱犵殑鍐呭鏀寔瀛楃缂栫爜锛屾瘮濡俢ontent:'\3066';浼氳娓叉煋鎴愬瓧绗︺儐锛屾墍浠ワ紝閫氳繃璁剧疆涓€涓浐瀹氱殑瀛楃鑼冨洿锛岀敤SASS鍑芥暟鍙互鏇村ソ鐨勭敓鎴愰殢鏈哄瓧绗︼紝浣嗘槸鎴戣瘯浜嗗緢涔咃紝鏈€缁堢敤SASS鍑芥暟鐢熸垚鐨勭粨鏋滀細鍦ㄦ暟瀛椾箣闂村姞涓婄┖鏍兼瘮濡俓鍜?066锛屼笉鑳介€氳繃瀛楃缂栫爜鏈€缁堣浆鍖栦负瀛楃銆傜粓浜庢斁寮冧簡鈥︹€︾敤CSS瀹炵幇鎵撳瓧鏁堟灉OK锛岀户缁紝鎺ヤ笅鏉ユ垜浠鐢–SS瀹炵幇鎵撳瓧鏁堟灉锛屼篃灏辨槸璁╁瓧绗︿竴涓竴涓殑鍑虹幇锛屽儚杩欐牱锛氳繖閲屾槸鍊熷姪鐗规€у疄鐜扮殑鍔ㄧ敾鐨勬楠わ紝涔熷氨鏄€愬抚鐨勪粠宸﹀埌鍙冲拰浠庝笂鍒颁笅鐨勫姩鐢诲師鐞嗘槸涓€鏍风殑銆備互浠庡乏鍒板彸涓轰緥銆傚亣璁炬垜浠湁26涓嫳鏂囧瓧绗︼紝骞朵笖鐭ラ亾26涓嫳鏂囧瓧绗︾粍鎴愮殑瀛楃涓茬殑闀垮害銆傞偅涔堟垜浠彧闇€瑕佽缃竴涓姩鐢伙紝璁╁畠鐨勫搴︿粠0-100%鍙樺寲鍒?6甯э紝鍔犱笂overflow:hidden锛屾瘡甯teps鍙互鏄剧ず涓€涓瓧绗︺€傚綋鐒讹紝杩欓噷鎴戜滑闇€瑕佷娇鐢ㄤ竴浜涙妧宸э紝鎴戜滑濡備綍閫氳繃瀛楃鏁扮煡閬撳瓧绗︿覆鐨勯暱搴﹀憿锛熻鐐癸細閫氳繃绛夊瀛椾綋鐨勭壒鐐癸紝閰嶅悎CSS涓殑ch鍗曞厓銆傚鏋滀綘涓嶇煡閬撶瓑瀹藉瓧浣撶郴鍒楁槸浠€涔堬紝鍙互鐪嬬湅鎴戠殑杩欑瘒鏂囩珷鈥斺€斻€婁綘璇ョ煡閬撶殑瀛椾綋 font-family銆嬨€傚湪CSS涓紝ch鍗曚綅琛ㄧず鏁板瓧鈥?鈥濈殑瀹藉害銆傚鏋滃瓧浣撳垰濂芥槸绛夊瀛椾綋锛屽嵆姣忎釜瀛楃鐨勫搴﹂兘涓€鏍凤紝閭ｄ箞ch灏卞彲浠ュ彉鎴愭瘡涓嫳鏂囧瓧绗︾殑瀹藉害锛岄偅涔?6ch鍏跺疄灏辨槸鏁翠釜瀛楃涓茬殑闀垮害銆傚埄鐢ㄨ繖涓壒鎬э紝缁撳悎鍔ㄧ敾姝ラ锛屾垜浠彲浠ュ緢鏂逛究鍦颁娇鐢–SS瀹炵幇鎵撳瓧鍔ㄧ敾鏁堟灉锛?h1>绾疌SS鎵撳瓧鍔ㄧ敾銆?/h1>h1{font-family:monospace;瀹藉害锛?6ch锛涚┖鐧斤細nowrap锛涙孩鍑猴細闅愯棌锛涘姩鐢伙細杈撳叆3ssteps(26,end);}@keyframestyping{0{width:0;}100%{瀹藉害锛?6ch锛泒}鍙互寰楀埌濡備笅缁撴灉锛氬畬鏁翠唬鐮佸彲浠ョ偣鍑昏繖閲岋細CodePenDemo--绾疌SS瀹炵幇鏂囧瓧杈撳叆鏁堟灉杞寲涓虹珫鎺掓晥鏋滀笅闈㈡垜浠氨鐢ㄤ笂闈㈢殑鎶€宸ф潵杞寲涓€涓嬨€傚皢姘村钩鎵撳瓧鏁堟灉杞崲涓哄瀭鐩存墦瀛楁晥鏋溿€傛牳蹇冪瑪鍚嶅涓嬶細
$str:'瀵逛笉璧枫€傗枻鈻モ枽鈻р檪鈾モ樆鈻衡梽鈻р枿UennininenenoHahhhhhhhhhhhhhhhhhhhhhhhhhhhhh銉剠銊呫劄銊炪劉銊劍銊︺剢銊с劎銊ｃ剣銊ｃ剣銊嬨剮銊戙剷銊曘劏銊ㄣ劀銊溿剻銊掋劋銊┿劑銊°劌銊°劌銊°劌銊°劌銊°劌銊°劌銊°劌銊°劌銊°劌銊°劌銊°劌銊°劌銊°劌銊°劌#$<>^&*_+';$length:str-length($str);@functionrandomChar(){$r锛氶殢鏈猴紙$闀垮害锛夛紱@returnstr-slice($str,$r,$r);}@functionrandomChars($number){$value:'';@if$number>0{@for$i浠?鍒?number{$value:$value+randomChar();鍊硷紱}p{瀹藉害锛?2px锛涘瓧浣撳ぇ灏忥細10px锛泈ord-break:break-all;}p::before{content:randomChars(20);棰滆壊锛?fff锛涘姩鐢伙細杈撳叆4ssteps(20,end)infinite;}@keyframestyping{0%{height:0;}25%{楂樺害锛?00%锛泒100%{楂樺害锛?00%锛涚浉姣斾笂涓€娆撅紝鏈夌偣鎭掓満锛屾湁鐐规亽缇庛€傚熀浜庢锛屾垜浠繘琛屼袱涓敼閫狅細鍩轰簬鍔ㄧ敾鐨刣urationanimation-time锛屽拰鍔ㄧ敾鐨刣elayanimation-delay锛屽湪姣忎釜鍔ㄧ敾鐨勭粨鏉熸垨杩囩▼涓鍔犱竴瀹氳寖鍥村唴鐨勯殢鏈哄唴瀹癸紝骞舵浛鎹吉鍏冪礌鐨勫唴瀹癸紝鍗抽噸鏂扮敓鎴愪竴娈靛唴瀹癸紝鐢⊿ASS鍙互寰堝鏄撶殑瀹炵幇銆傛牳蹇僑ASS浠ｇ爜濡備笅锛?n:3;$animationTime:3;$perColumnNums:20;@for$ifrom0through$n{$content:randomChars($perColumnNums);$contentNext:randomChars($perColumnNums);$寤惰繜锛氶殢鏈猴紙$n锛夛紱$randomAnimationTine:#{$animationTime+random(20)/10-1}s;p:nth-child(#{$i})::before{鍐呭:$content;棰滆壊锛?fff锛涘姩鐢伙細鎵撳瓧-#{$i}$randomAnimationTinesteps(20,end)#{$delay*0.1s*-1}infinite;}@keyframestyping-#{$i}{0%{height:0;}25%{楂樺害锛?00%锛泒100%{楂樺害锛?00%锛涘唴瀹癸細$contentNext锛泒}}鐪嬬湅鏁堟灉锛屽凡缁忎笉閿欎簡鏀硅繘锛氬綋鐒讹紝涓婇潰璇寸殑浠庢í鎺掑埌绔栨帓鐨勮繃娓★紝鍏跺疄杩樻槸鏈変簺涓嶄竴鏍风殑銆傚湪鐜版湁鐨勫瀭鐩存帓鍒楄鍒欎笅锛屾棤娉曢€氳繃瀛楃鏁颁笌ch鍖归厤寰楀埌瀹為檯鐨勫瀭鐩撮珮搴︺€傛墍浠ヨ繖閲屾湁涓€瀹氱殑鏉冭 銆備粠瀹為檯鏀炬參鍔ㄧ敾鐨勮搴︽潵鐪嬶紝鏃犲瓧鐨勫嚭鐜板彲鑳藉苟涓嶅畬鏁淬€傚綋鐒讹紝鍦ㄥ揩閫熷姩鐢绘晥鏋滀笅鍑犱箮瀵熻涓嶅埌銆傛坊鍔犲厜褰卞拰閫忔槑搴﹀彉鍖栨渶鍚庝竴姝ユ槸澧炲姞鍏夊奖鍜岄€忔槑搴﹀彉鍖栥€傛渶濂界殑鏁堟灉灏辨槸璁╂瘡涓€涓柊瑙掕壊鐨勪寒搴﹂兘淇濇寔鍦ㄦ渶澶э紝鑰屽凡缁忓嚭鐜扮殑瑙掕壊浜害閫愭笎鍑忓急銆備絾鏄敱浜庢垜浠繖閲屼笉鑳藉姣忎竴涓瓧绗﹁繘琛屽井璋冿紝鍙兘瀵规瘡涓€琛屽瓧绗﹁繘琛屾搷浣滐紝鎵€浠ユ垜浠彧濂藉彟杈熻箠寰勬潵瀹炵幇浜嗐€傛渶鍚庣殑鍔炴硶灏辨槸鍊熺敤鍙﹀涓€涓吉鍏冪礌鏉ュ悓姝ask鏉ヨ揪鍒版渶缁堢殑鏁堟灉銆傝鎴戜滑涓€姝ヤ竴姝ュ湴鐪嬩竴涓嬭繖涓繃绋嬨€備负鏂囧瓧娣诲姞浜壊鍜岄珮鍏夌涓€姝ユ槸涓烘枃瀛楁坊鍔犱寒鑹插拰楂樺厜锛岄潪甯哥畝鍗曪紝鍙渶瑕佸湪榛戣壊搴曡壊涓嬮€夋嫨浜壊锛屼娇鐢╰ext-shadow璁╂枃瀛楀彂鍏夊嵆鍙€俻::before{棰滆壊锛歳gb(179,255,199);text-shadow:001px#fff,002px#fff,005pxcurrentColor,0010pxcurrentColor;}鐪嬫晥鏋滐紝宸﹁竟鏄櫧鑹插瓧绗︼紝涓棿鏄敼鍙樺瓧绗﹂鑹诧紝鍙宠竟灏辨槸鏀瑰彉瀛椾綋棰滆壊鍜屾坊鍔犲瓧浣撻槾褰辨晥鏋滐細缁欐枃瀛楁坊鍔犱竴涓悓姝ラ伄缃╂帴涓嬫潵锛屽湪鏂囧瓧鍔ㄧ敾鐨勬椂鍊欏悓姝ユ坊鍔犱竴涓粦鑹插埌閫忔槑鐨勯伄缃╋紝灏介噺鎭㈠姣忎釜鏂板瓧绗︾殑鏈€澶т寒搴︼紝鑰屽凡缁忓嚭鐜扮殑浜虹墿閫愭笎鍓婂急銆傝繖涓晥鏋滅殑绀烘剰鍥惧ぇ鑷存槸杩欐牱鐨勩€傝繖閲屾垜鎶婃枃瀛楀眰鍜岄伄缃╁眰鍒嗗紑锛屾妸鑳屾櫙棰滆壊鐢遍粦鏀规垚鐧借壊锛岃繖鏍峰緢濂界悊瑙ｏ細閬僵灞傜殑澶ф浼唬鐮佸涓嬶紝鍙堢敤浜嗕竴涓厓绱犵殑浼唬鐮併€傚厓绱狅細p::after{鍐呭锛?';鑳屾櫙锛氱嚎鎬ф笎鍙橈紙rgba锛?,0,0,.9锛夛紝閫忔槑75%锛岄€忔槑锛夛紱鑳屾櫙澶у皬锛?00%220%锛涜儗鏅噸澶嶏細涓嶉噸澶嶏紱鍔ㄧ敾锛歮ask4s鏃犻檺绾挎€э紱}@keyframesmask{0%{background-position:0220%;}30%{鑳屾櫙浣嶇疆锛?0%锛泒100%{鑳屾櫙浣嶇疆锛?0%;}}鍡紝鏈€缁堢殑鏁堟灉鍔犺捣鏉ュぇ姒傛槸杩欐牱鐨勶細閫氳繃璋冩暣@keyframesmask鐨勪竴浜涘弬鏁帮紝鍙互寰楀埌涓嶅悓鐨勫瓧绗︽贰鍑烘晥鏋滐紝闇€瑕佽皟璇曚竴涓嬨€傚畬鏁翠唬鐮佸拰鏁堟灉閮絆K銆傛垜鎷嗚В浜嗕富瑕佹楠わ紝鏈€鍚庝笂浼犱簡瀹屾暣鐨勪唬鐮侊紝搴旂敤浜哖ug妯℃澘寮曟搸鍜孲ASS璇硶銆傚畬鏁寸殑浠ｇ爜鍔犺捣鏉ヤ笉鍒?00琛屻€?g-container-for(vari=0;i<50;i++)p@importurl('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200&display=swap');$str:'瀵逛笉璧峰涓嶈捣鈼佲枺鈻も枼鈻︹枾鈾傗櫏鈽烩柡鈼勨枾鈻ㄥ涓嶈捣瀵逛笉璧峰涓嶈捣銊犮劋銊堛剰銊掋剸銊欍劑銊濄劇銊bcdefghigklmnopqrstuvwxyz123456789%@#$<>^&*_+';$length:str-length($str);$n:50;$animationTime:4;$perColumnNums:25;@鍑芥暟randomChar(){$r:闅忔満($length);@returnstr-slice($str,$r,$r);}@functionrandomChars($number){$value:'';@if$number>0{@for$i浠?鍒?number{$value:$value+randomChar();}}@return$value;}body,html{瀹藉害:100%;楂樺害锛?00%锛涜儗鏅細#000婧㈠嚭锛氶殣钘忥紱}.g-瀹瑰櫒{瀹藉害锛?00vw锛涙樉绀猴細寮规€э紱璇佹槑鍐呭锛氱┖鏍间箣闂达紱寮规€у寘瑁咃細nowrap锛涘脊鎬ф柟鍚戯細琛岋紱',monospace,sans-serif;}p{position:relative;瀹藉害锛?vh锛涢珮搴︼細100vh锛涙枃鏈榻愶細灞呬腑锛涘瓧浣撳ぇ灏忥細5vh锛涘垎璇嶏細break-all锛涚┖鐧斤細棰勫寘瑁咃紱&::before,&::after{浣嶇疆锛氱粷瀵癸紱椤堕儴锛?锛涘乏锛?锛涘彸锛?锛涢珮搴︼細100%锛涙孩鍑猴細闅愯棌锛泒}@for$i浠?鍒?n{$content:randomChars($perColumnNums);$contentNext:randomChars($perColumnNums);$寤惰繜锛氶殢鏈猴紙$n锛夛紱$randomAnimationTine:#{$animationTime+random(20)/10-1}s;p:nth-child(#{$i})::before{鍐呭锛?content;棰滆壊锛歊GB锛?79銆?55銆?99锛夛紱鏂囨湰闃村奖锛?01px#fff锛?02px#fff锛?05pxcurrentColor锛?010pxcurrentColor锛涘姩鐢伙細鎵撳瓧-#{$i}$randomAnimationTinesteps(20,end)#{$delay*0.1s*-1}infinite;z-绱㈠紩锛?锛泒p:nth-child(#{$i})::after{$alpha:random(40)/100+0.6;鍐呭锛?';b鑳屾櫙锛氱嚎鎬ф笎鍙橈紙rgba锛?銆?銆?銆?alpha锛夈€乺gba锛?銆?銆?銆?alpha锛夈€乺gba锛?銆?銆?銆?alpha锛夈€侀€忔槑75%銆侀€忔槑锛夛紱鑳屾櫙-澶у皬锛?00%220%锛涜儗鏅噸澶嶏細涓嶉噸澶嶏紱鍔ㄧ敾锛氭帺鐮?randomAnimationTine鏃犻檺#{($delay-2)*0.1s*-1}绾挎€э紱z-鎸囨暟锛?锛泒@keyframestyping-#{$i}{0%{height:0;}25%{楂樺害锛?00%锛泒100%{楂樺害锛?00%锛涘唴瀹癸細$contentNext锛泒}}@keyframesmask{0%{鑳屾櫙浣嶇疆锛?220%锛泒30%{鑳屾櫙浣嶇疆锛?0%锛泒100%{鑳屾櫙浣嶇疆锛?0%锛泒}鏈€缁堟晥鏋滃棰樺浘锛氬畬鏁翠唬鐮佸拰婕旂ず鏁堟灉鍙互鐐硅繖閲岋細CodePenDemo--DigitalCharRainAnimation鏈€缁堢伒鎰熸潵婧愪簬琚佸窛鑰佸笀鐨勬晥鏋淐odePenDemo--Matrixdigitalrain銆傚師濮嬫晥鏋滄槸浣跨敤JavaScript瀹炵幇鐨勩€傛湰鏂囦娇鐢ㄧ函CSS杩涜瑙ｈ鏇村绮惧僵鐨凜SS鏁堟灉锛屽彲浠ュ叧娉ㄦ垜鐨凜SS鐏垫劅銆傛湰鏂囧埌姝ょ粨鏉熴€傚笇鏈涘浣犳湁鎵€甯姪锛氾級濡傛灉浣犳兂鑾峰彇鏈€鏈夎叮鐨凜SS璧勬枡锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇杞朵簨馃槃鏇村绮惧僵鐨凜SS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屼笉鏂洿鏂般€傛杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>