惊人的！！CSS也能实现烟雾效果吗？
鏈€杩戠敤CSS瀹炵幇浜嗕竴浜涚湅浼糃SS鏃犳硶瀹炵幇鐨勬晥鏋滐細浣跨敤娓愬彉瀹炵幇楂樼骇鑳屾櫙鍏夊姩鐢诲お绁炲浜嗭紒锛丆SS涔熻兘瀹炵幇Aurora鍚楋紵鏈枃缁х画杩欎釜绯诲垪銆傝繖绡囨枃绔犱富瑕佹兂璁ㄨ涓€涓嬩娇鐢–SS鏄惁鍙互鏇村ソ鐨勫疄鐜颁竴浜涚儫闆炬晥鏋溿€傚儚杩欐牱锛氫粩缁嗚瀵熺儫闆炬晥鏋滐紝杩樻湁涓や釜姣旇緝閲嶈鐨勭壒寰侊細妯＄硦鏁堟灉棰楃矑鎰熼鍏堢湅妯＄硦鏁堟灉锛屾兂鍒版ā绯婏紝澶ч儴鍒嗗悓瀛﹂鍏堜細鎯冲埌浣跨敤filter:blur()銆傚綋鐒跺彲浠ワ紝浣嗘槸鍦–SS涓紝闄や簡婊ら暅锛屾垜浠繕鍙互浣跨敤涓€绫诲叾浠栫殑鎵嬫鏉ユā鎷熸ā绯婃晥鏋溿€傜函CSS瀹炵幇鐑熼浘鍔ㄧ敾鍏堟潵鐪嬭繖鏍蜂竴涓晥鏋滐細鍋囪鎴戜滑鏈夎繖鏍蜂竴涓鑹诧細C鎴戜滑鍙互閫氳繃鏀瑰彉text-shadow+opacity鏉ユā鎷熺儫鈥嬧€嬮浘鐨勬晥鏋滐細span{text-shadow:000鐧界儫;鍔ㄧ敾锛氬啋鐑熺殑5s锛泒@keyframes鍐掔儫鐨剓鍒皗鏂囨湰闃村奖锛?020pxwhitesmoke锛涗笉閫忔槑搴︼細0锛泒}鐪嬫晥鏋滐細鍦ㄤ笂闈㈢殑鍩虹涓婏紝鎴戜滑鍙互娣诲姞Displacement锛宺otation锛宻caling锛岀◢寰慨鏀逛竴涓嬩笂闈㈢殑浠ｇ爜锛屾坊鍔犱竴浜泃ransform鍙樻崲锛歴pan{text-shadow:000whitesmoke;鍔ㄧ敾锛氱儫闆惧讥婕殑5s锛泒@keyframessmoky{鍒皗鍙樻崲锛歵ranslate3d(200px,-80px,0)rotate(-40deg)skewX(70deg)scale(1.5);鏂囨湰闃村奖锛?020pxwhitesmoke锛涗笉閫忔槑搴︼細0锛涘寲浣滅儫闆剧殑鎰熻銆傚湪姝ゅ熀纭€涓婏紝鎴戜滑鍙渶瑕佸皢澶氫釜瑙掕壊鏀惧湪涓€璧凤紝浣跨敤animation-delay搴忓垪鎺у埗姣忎釜瑙掕壊瑙﹀彂鍔ㄧ敾鏁堟灉锛屽氨鍙互寰楀埌涓婅堪瀹屾暣鐨勭儫闆炬晥鏋溿€備吉浠ｇ爜濡備笅锛?div>CSS//...
//...鎵€鏈夌殑浠ヤ笂CSScode@for$item浠?鍒?1{span:nth-of-type(#{$item}){animation-delay:#{(($item/10))}s;}}鍙互寰楀埌杩欐牱涓€涓椋庡惞璺戠殑鏂囧瓧锛屽彉鎴愮儫闆剧殑鏁堟灉锛氫笂闈㈢殑鏁堟灉涓嶆槸鎴戝師鍒涳紝鏄瑪鑰呯涓€娆＄湅鍒扳€斺€擟odePenDemo鈥斺€擲mokyTextByBennettFeelyusingtheSVGfeturbulence婊ら暅瀹炵幇鐑熼浘鏁堟灉涓婇潰鐨勭儫闆惧姩鐢昏繕鏄瘮杈冪矖绯欑殑銆備富瑕佹槸鍥犱负瀹冪己灏戜竴鐐归绮掓劅锛熺己灏戜竴浜涚儫闆剧殑璐ㄦ劅銆備负浜嗚幏寰楁洿绮捐嚧鐨勭儫闆炬晥鏋滐紝鎴戜滑蹇呴』浣跨敤SVG鐨?feturbulence>杩囨护鍣ㄣ€傚鏋滀綘瀵硅繖涓繃婊ゅ櫒涓嶆槸寰堜簡瑙ｏ紝鍙互鐪嬫垜鐨勬枃绔狅細鏈夎叮锛佸己澶х殑SVG婊ら暅浠や汉鎯婂徆锛佸阀鐢⊿VG婊ら暅涔熻兘鍋氬嚭琛ㄦ儏鍖咃紵瑕佸疄鐜颁竴涓細鍔ㄧ殑楦胯挋LOGO锛屾帴涓嬫潵灏辨槸浣跨敤filter:blur()閰嶅悎
婊ら暅鏉ヨ幏寰楁洿閫肩湡鐨勭儫闆炬晥鏋溿€備妇涓畝鍗曠殑渚嬪瓙锛屽亣璁炬湁鍑犱釜璇嶆槸杩欐牱鐨勶細:text;}寰楀埌杩欏嚑涓甫鏈夋笎鍙橀鑹茬殑鍗曡瘝锛氳鎴戜滑浣跨敤杩囨护鍣ㄧ畝鍗曞湴澶勭悊瀹冿細SMOKE
CSS浣跨敤杩囨护鍣細url()寮曞叆杩欎釜婊ら暅锛岃繖閲屼负浜嗘洿濂界殑鏁堟灉锛屾垜鐩存帴鍦?body>涓婂紩鍏ヤ簡杩欎釜婊ら暅锛歜ody{filter:url('#filter');}div{background:linear-gradient(#fff,#999,#ddd,#888);background-clip:text;}鎴戜滑鐨勫瓧浣撹婊ら暅璧嬩簣浜嗕竴绉嶆祦鐣呯殑鎰熻锛氳繖涓晥鏋滃彲浠ヨ鍜岀儫闆炬晥鏋滄棤鍏筹紝鍙槸闇€瑕佸啀鍔犱竴涓ā绯婅繃婊わ紝绁炲鐨勪簨鎯呭彂鐢熶簡锛歜ody{filter:url('#filter');}div{background:linear-gradient(#fff,#999锛?ddd锛?888锛夛紱鑳屾櫙鍓緫锛氭枃鏈紱filter:blur(5px);}鏁翠釜鏁堟灉鐬棿鍙樻垚浜嗗緢澶氱儫闆撅細OK锛岀粰瀹冨姞涓€涓渾褰㈢殑鍔ㄧ敾鏁堟灉锛岀畝鍗曠殑鐢↗avaScript澶勭悊涓€涓嬶細constfilter=document.querySelector("#turbulence");letframes=1;letrad=Math.PI/180;letbfx,bfy;functionfreqAnimation(){frames+=.2bfx=0.03;bfy=0.03;bfx+=0.005*Math.cos(frames*rad);bfy+=0.005*Math.sin(frames*rad);bf=bfx.toString()+""+bfy.toString();filter.setAttributeNS(null,"baseFrequency",bf);window.requestAnimationFrame(freqAnimation);}window.requestAnimationFrame(freqAnimation);鐪嬫晥鏋滐細涓婇潰鐨勫畬鏁翠唬鐮侊紝鍙互鐐硅繖閲岋細CodePenCSS+SVGTextSmokeEffect褰撶劧涓婇潰鐨勬晥鏋滃彲浠ラ€氳繃锛?feTurbulence鏉ユ帶鍒?baseFrequency灞炴€ц皟鏁存帶鍒?feTurbulence>鐨刵umOctaves灞炴€ц皟鏁达紝鎺у埗鐨剆cale灞炴€ц皟鏁淬€傚皢鐨刵umOctaves灞炴€т粠30鏀规垚70锛屾枃瀛楃殑杞粨灏卞熀鏈湅涓嶈浜嗐€傛暣涓枃鏈闆惧寲浜嗐€傛垜浠彲浠ュ仛鍑虹被浼艰繖鏍风殑鎮仠鏁堟灉锛氫笂闈㈢殑瀹屾暣浠ｇ爜锛屽彲浠ョ偣杩欓噷锛欳odePenCSS+SVGTextSmokeHoverEffect杩欐牱锛屽熀浜巉ilter:blur()鍜?feturbulence>杩囨护鍣紝鎴戜滑鍙互寰楀埌涓€涓潪甯搁€肩湡鐨勭儫闆炬晥鏋滐紝鍩轰簬涓婇潰鐨凞emonstration锛屾垜浠繕鍙互鎸栨帢鍑哄緢澶氭湁瓒ｇ殑鏁堟灉锛屾湰鏂囦笉鍐嶈禈杩般€傛渶鍚庯紝鏈枃鍒版缁撴潫锛屽笇鏈涙湰鏂囧浣犳湁鎵€甯姪:)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屽崈涓囦笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈杞朵簨馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂颁腑锛屾杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
