鍓嶈█浠讳綍鍙互鐢↗avaScript缂栧啓鐨勪笢瑗匡紝鏈€缁堥兘浼氱敤JavaScript缂栧啓銆傗€旈樋鐗逛紞寰峰畾寰嬩换浣曞彲浠ョ敤CSS瀹屾垚鐨勪簨鎯咃紝鏈€缁堥兘浼氱敤CSS瀹屾垚銆傗€斾綔鑰呮硶鍒欏彇鍐充簬瀛︾敓鑷繁鐨勪娇鐢ㄤ範鎯€備笉杩囩敤濂紺SS杩樻槸鍙互鎻愰珮寰堝寮€鍙戞晥鐜囩殑锛岃嚦灏戝彲浠ユ浛浠ｅ緢澶欽avaScript鍦烘櫙锛屽噺灏慗avaScript浠ｇ爜銆傚湪涓婁竴绡囨枃绔犱腑锛岀敤CSS鍙互瀹炵幇浠€涔堬紝鐢↗avaScript涓嶇敤鐞嗕細锛屾彁鍒颁簡鍑犵甯歌鐨勫満鏅€傝繖娆★紝绗旇€呭皢鍐嶅垎浜嚑涓娇鐢–SS浠ｆ浛JavaScript鐨勫満鏅€傚笇鏈涘ぇ瀹跺彲浠ュ湪鏃ュ父寮€鍙戜腑浣跨敤銆傛嬀鑹插櫒鎷捐壊鍣ㄦ槸JavaScript缁忓父浣跨敤鐨勫満鏅€傚鏋滆嚜宸卞紑鍙戜竴涓紝闈炲父澶嶆潅锛岄渶瑕佸涔犱竴瀹氱殑閽辨墠鑳芥壘鍒扮涓夋柟鎻掍欢銆俰nput鏍囩鐨則ype瀛楁鎻愪緵浜咰olor绫诲瀷锛屾柟渚挎垜浠娇鐢ㄦ嬀鑹插櫒锛岃€屼笖杩欎釜鎷捐壊鍣ㄨ繕鍙互鍚稿彇鏁翠釜鐢佃剳妗岄潰鐨勯鑹层€?inputtype="color"value="#0000ff">img{楂樺害锛?00%锛涘搴︼細100%锛沷bject-fit:cover;}input{padding:0;杈规锛氭棤锛涗綅缃細缁濆锛涘搴︼細100%锛涢珮搴︼細100%锛涙贩鍚堟贩鍚堟ā寮忥細鑹茶皟锛?/huemodecursor:pointer;}鍏堣涓€涓婥SS3涓竴涓柊鐨勫緢鏈夋剰鎬濈殑灞炴€р€斺€攎ix-blend-mode锛屽叾涓璵ix鍜宐lend鏄腑鏂囩殑鎰忔€濈炕璇戣繃鏉ュ氨鏄贩鍚堬紝鎵€浠ョ洿璇戝氨鏄繖涓睘鎬х殑浣滅敤娣峰悎妯″紡銆俶ix-blend-mode鐢ㄤ簬澶氫釜涓嶅悓label涔嬮棿鐨勬贩鍚堟ā寮忥紝鍏朵腑hue杩欐鐢ㄦ潵璋冩暣bodycolor浠ｈ〃鐨勬槸hue妯″紡锛屽浜庣啛鎮塒S鐨勫悓瀛︽潵璇村緢瀹规槗鐞嗚В銆俶ix-blend-mode杩樻湁鍏朵粬妯″紡锛屾劅鍏磋叮鐨勫悓瀛﹀彲浠ユ煡鐪媘ix-blend-mode鐨勬枃妗ｃ€傚畬鏁翠唬鐮佹紨绀篊arouselCarouselcarousel鐨勫ぇ閮ㄥ垎甯哥敤鍔熻兘閮芥槸浣跨敤JavaScript瀹炵幇鐨勩€傝CSS鏂规浠ｇ爜杈冨锛屽叿浣撻噰鐢ㄥ摢绉嶆柟妗堣瑙嗗疄闄呮儏鍐佃€屽畾銆傚畬鏁翠唬鐮佹紨绀篈ccordion瀹屾暣浠ｇ爜婕旂ず鏀惧ぇ闀滄垜鎯抽€犺疆瀛愪箣鍓嶅啓杩囦竴绡囨枃绔?Vue3鏀惧ぇ闀滅粍浠舵槸鐢╒ue3鍐欑殑銆傝櫧鐒朵唬鐮侀噺涓嶅锛屼絾鑲畾姣擟SS澶嶆潅锛屾秹鍙婂鐞嗗潗鏍囧€硷紝澶勭悊杈圭晫浣嶇疆绛夛紝鎵€浠SS鏂规鐨勬斁澶ч暅杩樻槸涓嶉敊鐨勯€夋嫨銆傚畬鏁翠唬鐮佹紨绀烘墦瀛楁晥鏋溿€傚鏋滅敤JavaScript缂栧啓锛屽垯闇€瑕佷娇鐢ㄨ鏃跺櫒鍜屽姩鐢绘潵鎷︽埅瀛楃涓层€?h1>娆㈣繋鏉ュ埌骞垮窞@-webkit-keyframestyping{from{width:0;}}@-webkit-keyframesblink-caret{50%{border-color:transparent;}}h1{瀛椾綋锛氱矖浣?00%Consolas銆佹懇绾冲摜銆佺瓑瀹藉瓧浣擄紱鍙宠竟妗嗭細.1em绾粦鑹诧紱瀹藉害锛?6.5em锛涘搴︼細21ch锛涗繚璇侀噾锛?em1em锛涚┖鐧斤細nowrap锛涙孩鍑猴細闅愯棌锛?webkit-animation:typing7ssteps(21,end),blink-caret.5sstep-endinfinitealternate;}remlayout浠ュ線绉诲姩绔娇鐢╮em甯冨眬鏃讹紝浼氭牴鎹笉鍚岀殑灞忓箷瀹藉害璁剧疆涓嶅悓鐨刦ont-size涓轰簡瀹炵幇閫傞厤锛屾墍浠ヤ笉寰椾笉浣跨敤JavaScript鏉ヨ缃€備緥濡傦細浠?50px鐨勮璁＄涓哄熀鍑嗭紝璁剧疆鏍硅妭鐐圭殑font-size涓?00px锛屽彧鑰冭檻DPR涓?鐨勬儏鍐礘avaScript瑙ｅ喅鏂规document.querySelector('html').style.fontSize=`${window.innerWidth/7.5}px`;CSSschemehtml{font-size:100vw/750}鎴柇鏂囧瓧鎴柇鏂囧瓧涔熸槸鍓嶇楂橀浣跨敤鍦烘櫙锛岀浉淇″緢澶氬悓瀛﹂兘宸茬粡鐢ㄨ繃浜嗐€備互鍓嶆槸閫氳繃鍚庡彴杩涜鎷︽埅锛屼絾鏄繖绉嶆柟寮忓鏄撲涪澶辨暟鎹紝涓嶅埄浜嶴EO锛屼絾鏄€氳繃CSS杩涜鎷︽埅姣旇緝鐏垫椿锛屽彲浠ョ粺涓€搴旂敤鍒版暣涓」鐩腑銆傝鎶€鏈富瑕佷娇鐢╰ext-overflow灞炴€э紝铏界劧鏄疌SS3鐨勬柊灞炴€э紝浣嗗湪鍚勫ぇ娴忚鍣ㄤ腑閮芥湁寰堝ソ鐨勫吋瀹规€с€傚崟琛屾埅鏂璽ext.ellipsis{display:inline-block;瀹藉害锛?0px锛涚┖鐧斤細nowrap锛涙枃鏈孩鍑猴細鐪佺暐鍙凤紱overflow:hidden;}澶氳鎴柇text.ellipsis{width:300px;婧㈠嚭锛氶殣钘忥紱鏂囨湰婧㈠嚭锛氱渷鐣ュ彿锛涙樉绀猴細-webkit-box锛?webkit-line-clamp:2;-webkit-box-orient:vertical;}鑷畾涔夎緭鍏ョ劍鐐瑰厜鏍囩殑棰滆壊鏈夋椂鍊欒璁¤€呬細鏈変竴浜涙瘮杈冨垇閽荤殑闇€姹傦紝姣斿杈撳叆鍏夋爣鐨勯鑹蹭笉鑳藉拰鏁翠綋椋庢牸缁熶竴銆傝繖鏃跺€欐垜浠彲浠ラ€氳繃璁剧疆caret-color灞炴€ф潵婊¤冻杩欎釜闇€姹傘€?inputclass="custom"value="Thecursorhasturnedred"/>input.custom{car鈥嬧€媏t-color:red;}Stickynavigation浠ュ墠杩欎釜鍔熻兘杩樻槸闇€瑕侀€氳繃offsetTop鍜寃indow.scrollY鏉ュ垽鏂€侰SS3涓柊澧炵殑position:sticky璁╂垜浠緢瀹规槗瀹炵幇杩欎釜鍔熻兘銆傜浉淇″緢澶氬悓瀛︿篃寮€濮嬩娇鐢ㄨ繖涓睘鎬т簡銆傚叿鏈夌矘鎬у畾浣嶇殑鍏冪礌灏嗗厖褰撶浉瀵瑰畾浣嶅厓绱狅紝鐩村埌瀹冨埌杈捐鍙ｄ笂鐨勭粰瀹氱偣锛岀劧鍚庢垚涓哄浐瀹氬畾浣嶅厓绱犮€備娇鐢?webkit鍓嶇紑鐨勬祻瑙堝櫒鏀寔楂樿揪92%銆?nav{浣嶇疆锛氱矘鎬э紱top:0;}鍩嬬偣缁熻褰撲竴涓綉绔欐垨app鐨勮妯¤揪鍒颁竴瀹氱▼搴︼紝闇€瑕佸垎鏋愮敤鎴峰湪app鎴栫粺璁＄綉绔欎腑鐨勭浉搴旀搷浣滐紝闇€瑕佸鐢ㄦ埛琛屼负杩涜鍩嬬偣缁熻锛岃繖涓嶇敤璇翠簡銆傚湪涓婁竴绡囨枃绔犱腑锛岀敤CSS灏辫兘瀹炵幇鐨勪笢瑗匡紝鐢↗avaScript灏变笉鐢ㄨ垂蹇冧簡銆傚鍓嶆墍杩帮紝鎴戜滑鍙互浣跨敤CSS鐨勫唴瀹瑰睘鎬ttr鏉ユ崟鑾锋暟鎹€傚叾瀹炴垜浠篃鍙互鍦╟ontent灞炴€т腑鍋氬煁缁熻鐨勫姛鑳姐€?link:active::after{棰滆壊锛氱孩鑹诧紱content:url("濉啓缁熻淇℃伅鐨勬帴鍙?);}褰撶劧杩欎釜鏂规硶浣跨敤鐨勬槸姣旇緝绠€鍗曠殑浜嬩欢鍩嬬偣銆傚鏋滃鏉傦紝杩樻槸闇€瑕丣avaScript鎿嶄綔銆傜敤鎴峰彲浠ラ€氳繃娴忚鍣ㄧ鐢↗avaScript宓屽叆鐨勭粺璁′俊鎭紝浣嗘槸娌℃湁鍔炴硶绂佺敤CSS銆傚彟澶栵紝杩欎釜content灞炴€ц繕鏈夊緢澶氭湁瓒ｇ殑浣跨敤鏂瑰紡锛屾瘮濡備笅鍥句腑鐨刲oading鍔ㄧ敾銆?h1data-text="鎷煎懡鍔犺浇...">鎷煎懡鍔犺浇...h1{position:relative;棰滆壊锛歳gba(0,0,0,.3);font-size:5em}h1:before{content:attr(data-text);浣嶇疆锛氱粷瀵癸紱婧㈠嚭锛氶殣钘忥紱鏈€澶у搴︼細7em锛涚┖鐧斤細nowrap锛涢鑹诧細#fff锛涘姩鐢伙細鍔犺浇8s绾挎€э紱}@keyframes鍔犺浇{0%{max-width:0;}}姣旇緝鏈夋剰鎬濈殑鑱氬厜鐏晥鏋滀娇鐢╟lip-path鏉ュ疄鐜伴伄缃╂晥鏋溿€傛湰渚嬩腑灞炴€у€间负ellipse(100px100pxat0%50%)锛屽墠涓や釜鍙傛暟涓篹llipse鐨剎杞撮暱搴﹀拰y杞撮珮搴︼紝at鍚庨潰鐨勪袱涓弬鏁板垎鍒槸x杞翠綅缃拰y-axis鐩稿浜庡叾鑷韩鍏冪礌鐨勪綅缃€傛敞鎰忥細浣跨敤璇ュ睘鎬ф椂闇€瑕佹敞鎰忔祻瑙堝櫒鐨勫吋瀹规€с€傛瘮濡係afari闇€瑕佸姞涓婂墠缂€-webkit-銆備娇鐢ㄥ吋瀹瑰墠缂€鏃讹紝蹇呴』淇濈暀鍘熸湁鐨凜SS锛堥潪鍓嶇紑锛変唬鐮侊紝涓嶈兘鍒犻櫎銆傚湪璁剧疆鏂囨湰鑳屾櫙鏃讹紝榛樿鏄枃鏈墍鍦ㄧ殑鍧楃骇鍏冪礌瑕嗙洊鑳屾櫙銆傚鏋滃彧鎯冲鏂囧瓧搴旂敤鑳屾櫙锛岀被浼间簬棰滆壊鐨勬晥鏋滐紝鍙互浣跨敤鑳屾櫙閬僵background-clip:text;
