当前位置：首页 > Web前端 > JavaScript

离谱的CSS！从表盘刻度到艺术剪纸

时间：2023-03-27 17:35:09 JavaScript

鏈変竴澶╋紝缇ら噷鏈変釜闂锛岃繖鏍风殑鍒诲害鐩樻€庝箞瀹炵幇锛氳繖鍏跺疄鏄釜寰堟湁鎰忔€濈殑闂锛屾湁寰堝绉嶆柟娉曘€傚崟鏍囩锛屼娇鐢╟onic-gradient瀹炵幇琛ㄧ洏鍒诲害鏈€绠€鍗曟柟渚跨殑鏂规硶灏辨槸浣跨敤conic-gradient瑙掑害娓愬彉锛屼唬鐮佷篃寰堢畝鍗曪紝棣栧厛鎴戜滑瀹炵幇涓€涓噸澶嶇殑瑙掑害娓愬彉锛?div>

div{瀹藉害锛?00px锛涢珮搴︼細300px锛涜竟鐣屽崐寰勶細50%锛沚ackground:repeating-conic-gradient(#0000,#000.8deg,transparent1deg,transparentcalc((360/60)*1deg));}鍏跺疄姣旇緝闅剧悊瑙ｇ殑鏄痗alc((360/60)*1deg),鍥犱负琛ㄧ洏涓婇€氬父鏈?0涓埢搴︺€傛晥鏋滃ぇ姒傛槸杩欐牱鐨勶細鎺ヤ笅鏉ュ彧闇€瑕佸皢涓棿鎸栫┖鍗冲彲銆傚鏋滃簳鑹叉槸鐧借壊锛岀洿鎺ュ彔鍔犱竴涓渾灏卞彲浠ヤ簡銆傚綋鐒舵洿濂界殑鍔炴硶鏄€氳繃mask灞炴€ф寲绌猴細{background:repeating-conic-gradient(#0000,#000.8deg,transparent1deg,transparentcalc(/60*1deg));mask:radial-gradient(transparent0,transparent140px,#000140px)}杩欐牱鎴戜滑灏卞緱鍒颁簡鍒诲害鐩樺埢搴︼細杩欐槸浣跨敤鏍囩鐨勬柟寮忥紝褰撶劧缂虹偣涔熷緢鏄庢樉锛氶敮榻夸弗閲嶏紝鑰屾笎鍙樼殑閫氱梾鏄娇鐢ㄨ搴︽笎鍙橈紝灏哄害澶撮噸鑴氳交銆傝秺闈犺繎鍐呴儴锛屽搴﹁秺绐勶紙灏哄害瓒婂ぇ锛屽樊寮傝秺鏄庢樉锛夈€傚鏋滀綘浠嬫剰浣跨敤澶鏍囩锛岄€氬父鏇村鏄撴兂鍒颁娇鐢?0涓爣绛撅紝鍔犱笂鏃嬭浆锛?divclass="g-container">

//...涓€鍏?0涓?divclass="g-item">

.g-item{position:absolute;瀹藉害锛?px锛涢珮搴︼細12px锛涜儗鏅細#000锛涘乏锛?锛涢《閮細0锛泃ransform-origin:0150px;}@for$i浠?鍒?0{.g-item:nth-child(#{$i}){transform:rotate(#{($i-1)*6deg});}}杩欐牱锛屾垜浠娇鐢ㄤ簡60涓猟iv鏍囩锛屽埄鐢⊿ASS鐨刦or璇硶锛屽噺灏戦噸澶嶄唬鐮侀噺锛屽疄鐜颁簡姣忎釜鍏冪礌鍒嗘壒閫愭鍥寸粫涓€瀹氳搴︽棆杞紝涔熷疄鐜颁簡涓€涓埢搴︾洏Scaled锛氳繖绉嶆柟妗堢殑浼樼偣鏄瘡涓碁鐗囧叿鏈夌浉鍚岀殑鍘氬害骞朵笖娌℃湁閿娇鐘躲€備娇鐢?webkit-box-reflect鍑忓皯鏍囩鏁伴噺褰撶劧锛屼笂杩版柟妗堢殑缂虹偣鏄敤60涓爣绛炬潵瀹屾垚杩欎箞绠€鍗曠殑鍥惧舰锛屾湭鍏嶆湁浜涜繃浜庡ア渚堜簡銆傛垜浠笇鏈涘敖鍙兘浼樺寲浼樺寲鏍囩鐨勬暟閲忋€傝嚦姝わ紝鎴戜滑寰堝鏄撴兂鍒扳€斺€攚ebkit-box-reflect锛屽弽灏勬晥鏋滃睘鎬с€?webkit-box-reflect鏄竴涓潪甯告湁瓒ｇ殑灞炴€э紝瀹冧娇CSS鑳藉鍍忛暅瀛愪竴鏍峰伐浣滐紝鍙嶆槧鎴戜滑鐨勫厓绱犳渶鍒濈粯鍒剁殑鍐呭銆?webkit-box-reflect鐨勮娉曞緢绠€鍗曪紝鏈€鍩烘湰鐨勭敤娉曟槸杩欐牱鐨勶細div{-webkit-box-reflect:below;}鍏朵腑锛宐elow鍙互鏄痓elow|浠ヤ笂|宸right浠ｈ〃bottom,top,left,right锛屼篃灏辨槸鏈?涓柟鍚戝彲浠ラ€夋嫨銆傚亣璁炬垜浠湁濡備笅鍥剧墖锛?div>div{background-image:url('https://images.pokemontcg.io/xy2/12_hires.png');}plus-webkit-box-reflect:瀵癸紝灏辨槸鍙宠竟鐨勫€掑奖锛歞iv{background-image:url('https://images.pokemontcg.io/xy2/12_hires.png');-webkit-box-reflect:right;}鏁堟灉濡備笅锛屽湪鍏冪礌鍙充晶鐢熸垚涓€涓暅鍍忓厓绱狅細浣跨敤-webkit-box-reflect:right鎴戜滑鍙互灏嗕娇鐢ㄩ噺浠庤嚦灏?0涓爣绛惧噺灏戝埌15涓爣绛俱€傜畝鍗曞湴宓屽涓ゅ眰銆傛垜浠畝鍗曠殑鏀逛竴涓婬TML缁撴瀯锛?divclass="g-parent">

//...涓€鍏?6涓?divclass="g-item">杩欐锛屾垜浠彧闇€瑕佸疄鐜?/4鐨勫渾姣斾緥锛欯for$ifrom1through16{.g-item:nth-child(#{$i}){鍙樻崲锛氭棆杞?#{($i-1)*6deg});}}鎴戜滑鍙互寰楀埌杩欐牱涓€涓浘褰細鍩轰簬杩欎釜鍥惧舰锛屾垜浠彧闇€瑕佸厛鍚戝乏鍙嶅皠涓€娆★紝鐒跺悗鍐嶅悜涓嬪弽灏勶細.g-container{-webkit-box-reflect:below;}.g-parent{-webkit-box-reflect:left;}鏁堟灉濡備笅锛氬ぇ浣撴晥鏋滃嚭鏉ヤ簡锛屽綋鐒?鐐广€?鐐广€?鐐硅繖鍥涗釜鍒诲害鏈夐棶棰?鍜?鐐归挓銆備絾鏄?webkit-box-reflect涔熸彁渚涗簡璺濈璋冩暣鍔熻兘锛岀劧鍚庣畝鍗曚慨鏀逛竴涓嬩唬鐮侊細.g-container{-webkit-box-reflect:below4px;}.g-parent{-webkit-box-reflect:left-4px;}杩欎竴娆★紝鏁堟灉姝ｆ槸鎴戜滑鎯宠鐨勶細鎴戜滑璁炬硶鐢?webkit-box-reflect鑺傜渷浜嗘爣绛炬暟閲忕殑3/4銆傚畬鏁翠唬鐮侊細CodePenDemo--Clockticks-webkit-box-reflect鍜屽壀绾哥殑鑹烘湳璇村埌杩欓噷锛屾垜涓嶇鎯冲埌杩欑瀵规姌锛屽鎶橈紝闀滃儚闀滃儚鐨勬柟寮忓緢鍍忓埌鎴戜滑灏忔椂鍊欑殑鎶樼焊鑹烘湳銆傛墍浠ワ紝鍩轰簬杩欐牱涓€涓ā鏉匡細

.g-container{-webkit-box-reflect:below;}.g-parent{-webkit-box-reflect:left;}鎴戝彧闇€瑕佺粯鍒?g-item閲岄潰鐨勫唴瀹癸紝浼?娆?webkit-box-reflectimage锛屽彲浠ュ緱鍒板壀绾稿浘褰€備互鍙婂浣曞緱鍒伴殢鏈烘湁瓒ｇ殑涓嶈鍒欏浘褰紵clip-path鏄竴涓緢濂界殑閫夋嫨锛屾垜浠€氳繃clip-path闅忔満瑁佸壀涓€涓煩褰細.g-item{width:150px;楂樺害锛?50px锛涜儗鏅細#000锛涘壀杈戣矾寰勶細澶氳竟褰紙25%0%銆?1%66%銆?9%0%銆?9%23%銆?5%4%銆?00%40%銆?7%100%銆?8%100%銆?7%71%,36%30%,23%60%,0%100%,5%37%);}鏁堟灉濡備笅锛氫袱娆￠暅鍍忓悗鏁堟灉濡備笅锛氭湁杩欎箞鏈夋剰鎬濆悧锛熷彲浠ラ殢鎰忎娇鐢╟lip-path澶氳瘯鍑犳锛屽彲浠ュ緱鍒颁笉鍚岀殑鏁堟灉锛欳odePenDemo--PureCSSPageCutting-webkit-box-reflectwithclip-pathandmask锛屼絾鏄笂闈㈢殑鍥惧舰鐪嬭捣鏉ュお绠€鍗曚簡锛屾湁鍑犱釜鍘熷洜锛屼竴鏄鎶樼殑娆℃暟鍜岃搴︿笉澶燂紝涓嶅悓瑙掑害鐨勫鎶樺拰瀵规姌鐨勬鏁颁笉瓒筹紝浜屾槸鍥惧舰涓嶅涓嶅璐熻矗銆傛兂璧蜂箣鍓嶇湅杩囦竴绡囩被浼煎壀绾哥浉鍏崇殑鏂囩珷鈥斺€擯aperSnowflakes:CombiningClippingandMaskinginCSS銆傚湪涓婇潰鐨勫熀纭€涓婏紝杩樹娇鐢ㄤ簡閬僵锛屽皢鍥惧舰鍒囧壊寰楁洿缁嗐€傚啀鏉ヤ竴閬嶏紝杩樻槸涓€鏍风殑缁撴瀯锛屽綋鐒朵负浜嗗緱鍒版洿璐熻矗鐨勫浘褰紝鎴戜滑璁剧疆浜?涓?g-item锛?divclass="g-parent">

棣栧厛锛岃缃竴涓猚lip-path鍒囧浘锛?g-item:nth-child(1){width:150px;楂樺害锛?50px锛涜儗鏅細#000锛涘壀杈戣矾寰勶細澶氳竟褰紙17%41%锛?%39%锛?6%91%锛?8%78%锛?6%11%锛?8%71%锛?9%67%锛?5%65%锛?9%72%,46%28%,90%76%,67%34%,48%30%,79%36%,59%15%,23%92%,16%1%,32%81%,72%38%,50%59%,71%98%,66%87%,83%14%,36%71%,49%7%,9%25%,52%76%,10%83%,17%41%);}鏁堟灉濡備笅锛氳繖寮犲浘鍙兘鐗瑰埆濂囨€紝娌￠棶棰橈紝鎴戜滑缁х画銆傚鏋滄垜浠妸涓€涓煩褰粠宸︿笅瑙掑紑濮嬪垎鎴?浠斤紝閭ｄ箞姣忎唤閮芥槸90掳/4=22.5掳锛屾垜浠笇鏈涘垏涓€閮ㄥ垎锛氭垜浠彲浠ヤ娇鐢╩ask鏉ュ畬鎴愯繖涓垏锛?g-item:nth-child(1){瀹藉害锛?50px锛涢珮搴︼細150px锛涜儗鏅細#000锛涘壀杈戣矾寰勶細澶氳竟褰紙.....锛夛紱mask:conic-gradient(from0turnat0100%,#000,#00022.5deg,transparent22.5deg,transparent);}涓婇潰鐨勫浘褰㈣鎴愯繖鏍凤細OK锛屽熀浜庢锛屾垜浠彲浠ュ緱鍒扮浉鍚岀殑绗簩涓浘褰?浣嗘垜浠坊鍔犱簡涓€涓猺otateY(180deg):.g-item:nth-child(2){width:150px;楂樺害锛?50px锛涜儗鏅細#000锛涘壀杈戣矾寰勶細澶氳竟褰紙.....锛夛紱mask:鍦嗛敟姊害锛堜粠0turnat0100%,#000,#00022.5deg,transparent22.5deg,transparent锛?transform:rotateY(180deg);}鏁堟灉濡備笅锛氭垜浠娇鐢╮otateZ()灏嗙浜屼釜鍥惧舰鏃嬭浆涓€瀹氳搴︼紝浣垮叾涓庣涓€涓繚鎸佷竴鑷村悎鍦ㄤ竴璧凤細.g-item:nth-child(2){鍓緫璺緞:澶氳竟褰?.....);鎺╃爜锛氬渾閿ユ搴︼紙浠?turnat0100%,#000,#00022.5deg,transparent22.5deg,transparent锛?transform:rotateY(180deg)rotateZ(-45deg);}寰楀埌涓€涓枩瑙掔殑闀滃儚锛氬洜涓?g-item琚垏鍓叉垚4浠斤紝鎵€浠ョ3鍜岀4涓浘褰㈠彲浠ョ敤鍚屾牱鐨勬柟寮忓鐞嗐€傝繖鏍凤紝鏁翠釜.g-item鐨勬晥鏋滃涓嬶細鐒跺悗鎵撳紑-webkit-box-reflect锛屾暣涓浘褰㈡晥鏋滃涓嬶細杩欐牱锛屼竴涓猚lip绾歌川鍥惧舰璇炵敓锛佸綋鐒讹紝涓轰簡寰楀埌涓嶅悓鐨勬晥鏋滐紝鎴戜滑鍙互浣跨敤JavaScript鍦–SS涓殢鏈虹敓鎴愬悇绉嶅弬鏁般€傚畬鏁寸殑浠ｇ爜澶ф鏄繖鏍凤細

.g-瀹瑰櫒,.g-鐖舵瘝{浣嶇疆锛氱浉瀵?鏄剧ず锛氬脊鎬э紱瀹藉害锛?50px锛沨eight:150px;}.g-item{position:absolute;椤堕儴锛?锛涘乏锛?锛涘簳閮細0锛涘彸锛?锛涜儗鏅細#000锛涘彉鎹㈠師鐐癸細0100%锛涘壀杈戣矾寰勶細var(--澶氳竟褰紝澶氳竟褰?40%0%,0%91%,52%100%,0%37%,77%23%,77%76%,43%22%,55%88%,100%100%,100%10%));}.g-item{mask:conic-gradient(from0turnat0100%,#000,#00022.5deg,transparent22.5deg,transparent);}@瀵逛簬$i浠?鍒?{.g-item:nth-child(#{$i}){transform:rotateZ(calc(22.5deg*#{$i-1}));}}.g-item:nth-child(2){transform:rotateY(180deg)rotateZ(-60deg);}.g-item:nth-child(4){transform:rotateY(180deg)rotateZ(-105deg);}.g-container{-webkit-box-reflect:below;}.g-parent{-webkit-box-reflect:left;}constele=document.querySelectorAll('.g-item');document.addEventListener('click',function(e){letnum=Math.floor(Math.random()*30+10);constmaskR=Math.floor(Math.random()*22.5+22.5)+'deg';constr1=Math.floor(Math.random()*100)+'%';constr2=Math.floor(Math.random()*100)+'%';璁╁杈瑰舰='澶氳竟褰?'+r1+''+r2+',';for(leti=0;i{item.setAttribute('鏍峰紡',`--澶氳竟褰?${polygon};-webkit-mask:conic-gradient(from0turnat0100%,#000,#000${maskR},transparent${maskR},transparent)`);});});杩欐牱锛屾垜浠瘡娆＄偣鍑婚紶鏍囷紝灏卞彲浠ュ緱鍒颁笉鍚岀殑闅忔満鍓焊鍥炬锛氱湅鐪嬭繖寮犵畝鍗曞綍鍒剁殑GIF锛氬畬鏁翠唬鐮侊紝鍙互鎴宠繖閲孋odePenDemo--PureCSSArtPageCutting鏈€鍚庯紝灏辨槸杩欎釜浜嗘湰绡囧埌姝ょ粨鏉燂紝甯屾湜瀵逛綘鏈夋墍甯姪锛氾級濡傛灉浣犳兂鑾峰彇鏈€鏈夎叮鐨凜SS璧勬枡锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈杞朵簨馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github--iCSS锛屾寔缁洿鏂颁腑锛屾杩庣偣鍑诲鏄熻闃呮敹钘忔湁浠€涔堥棶棰樻垨寤鸿锛屽彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>

上一篇：微信小程序使用Stomp连接websockt

下一篇：图普Web可视化引擎在仿真分析领域的应用

离谱的CSS！从表盘刻度到艺术剪纸相关文章

最新推荐

猜你喜欢