用CSS实现炫彩三角边框动画

时间：2023-03-28 19:04:29 HTML

鏈€杩戞湁鏈嬪弸闂垜锛屽湪鏌愮綉绔欑湅鍒颁竴涓敤SVG鍒朵綔鐨勭偒褰╀笁瑙掕竟妗嗗姩鐢伙紝闂兘涓嶈兘鐢–SS瀹炵幇锛氫竴涓緢鏈夋剰鎬濈殑鍔ㄧ敾鏁堟灉锛岀珛椹鎴戞兂璧蜂簡鎴戝湪CSSwhismicalborderanimation涓€鏂囦腑浠嬬粛杩囩殑杈规鍔ㄧ敾锛岄潪甯哥浉浼硷細瀹冪殑鏍稿績鏄娇鐢ㄤ簡conic-gradient锛岀劧鍚庣敤mask瑕嗙洊鍥炬涓績鍖哄煙鐨勪竴涓皬鍥惧舰瀹炵幇銆備絾鏄紝杩欎釜涓夎褰㈠姩鐢绘湁涓や釜闅剧偣锛氭暣涓浘褰㈡槸涓€涓笁瑙掑舰銆傚湪CSS涓紝鎴戜滑鍙互寰堝鏄撳湴瀹炵幇鐭╁舰鍜屽渾褰紝浣嗘槸涓夎褰㈠湪杩欓噷鏃犵枒瑕佸鏉傚緱澶氥€傛暣涓鐣屼篃浼撮殢鐫€闃村奖锛屽奖瀛愪緷鏃у湪澧冪晫鐨勪袱杈广€傝繖閲岀湅浼间笉澶嶆潅锛屽叾瀹為潪甯搁毦銆傚鏋滅敤涓婇潰鐨勬柟娉曪紝閫氳繃瑕嗙洊鍜岄伄鐩栦竴涓皬鍥惧舰锛屾妸鍥炬鐨勪腑蹇冨尯鍩熸寲绌猴紝閭ｄ箞鍙︿竴涓晶褰辨槸鎬庝箞鏉ョ殑鍛紵鍗充娇浣跨敤闃村奖锛屽畠涔熶細琚唴閮ㄥ浘褰㈣鐩栥€傚綋鐒讹紝CSS杩樻槸鍙互瀹炵幇杩欎釜鍥惧舰鐨勩€傛湰鏂囧皢璁茶В濡備綍浣跨敤CSS瀹炵幇涓婅堪褰╄壊涓夎杈规鍔ㄧ敾銆傞€氳繃瑙掑害娓愬彉瀹炵幇涓讳綋鍔ㄧ敾棣栧厛锛屾垜浠繕闇€瑕佸€熷姪瑙掑害娓愬彉conic-gradient鏉ュ疄鐜版暣涓姩鐢荤殑涓讳綋銆?div>

@property--angle{璇硶锛?';缁ф壙锛氬亣鐨勶紱鍒濆鍊硷細0deg;}div{瀹藉害锛?60px;楂樺害锛?60px锛涜儗鏅細鍦嗛敟姊害锛堟潵鑷獀ar(--angle)銆乭sl(162銆?00%銆?8%)銆乭sl(270銆?3%銆?3%)銆乭sl(162銆?00%銆?8%)锛夛紱鍔ㄧ敾锛氭棆杞?s鏃犻檺绾挎€?}@keyframes鏃嬭浆{鍒皗--angle:360deg;}}鏍稿績鍙槸涓€涓搴︽笎鍙樺浘妗堬紝缁撳悎CSS@Property锛岃鏁翠釜鏁堟灉鏃嬭浆锛氬綋鐒讹紝濡傛灉浣犺寰桟SS@Property涓嶅ソ鐞嗚В鎴栬€呮媴蹇冨吋瀹规€ч棶棰橈紝鍙互鏇挎崲閫氳繃浣跨敤浼厓绱犲疄鐜扮浉鍚岀殑鍥惧舰锛岀劧鍚巘ransform:rotate()鏃嬭浆锛屾晥鏋滄槸涓€鏍风殑銆傚熀浜庣煩褰㈢殑涓夎褰㈠氨OK浜嗐€傛帴涓嬫潵锛屾垜浠渶瑕佹牴鎹煩褰㈠緱鍒颁笁瑙掑舰銆傚浜庡鍦堢殑涓夎褰紝鎴戜滑鍙互閫氳繃clip-path杩涜瑁佸壀锛屼篃寰堢畝鍗曪細div{width:260px;楂樺害锛?60px锛涜儗鏅細鍦嗛敟姊害锛堟潵鑷獀ar(--angle)銆乭sl(162銆?00%銆?8%)銆乭sl(270銆?3%銆?3%)銆乭sl(162銆?00%銆?8%)锛涘姩鐢伙細鏃嬭浆3s鏃犻檺绾挎€э紱+clip-path:polygon(0100%,100%100%,50%0);}寰楀埌濡備笅鏁堟灉锛氳繖鏍凤紝鎴戜滑灏卞緱鍒颁簡涓€涓疄蹇冧笁瑙掑舰銆傛帴涓嬫潵锛屾垜浠渶瑕佹兂鍔炴硶鎶婇噷闈㈡寲绌恒€傛渶绠€鍗曠殑鎬濊矾灏辨槸鍦ㄤ腑闂村彔鍔犱竴涓昂瀵歌緝灏忕殑鍥惧舰锛岄鑹茶鍜岃儗鏅壊涓€鏍凤細瀹屾暣浠ｇ爜鍙互鐐硅繖閲?-CodePenDemo--PureCSSLinearTriangle浣嗘槸锛屾湁杩欐牱鍋氱殑涓や釜鑷村懡闂锛氬鏋滆儗鏅壊涓嶆槸绾壊鑰屾槸娓愬彉鑹诧紝杩欎釜鏂规硶灏变細澶辫触銆傜敤杩欑鏂规硶瀹炵幇鐨勪笁瑙掑舰杈规鍐呬晶鏄笉鑳藉姞闃村奖鏁堟灉鐨勩€傝繖涓や釜缂洪櫡鏄笉鑳芥帴鍙楃殑锛屾墍浠ユ垜浠繀椤绘兂鍔炴硶鎶婁腑闂寸湡姝ｆ寲绌恒€傞晜绌哄悗闇€瑕佷腑闂撮€忔槑銆傚洜姝わ紝杩欓噷鎴戜滑涓嶅緱涓嶄娇鐢╩ask銆備絾鏄湪杩欐牱鐨勫浘褰㈠熀纭€涓婄敤mask瀹炵幇鏇村皬鐨勪笁瑙掑舰姣旇緝楹荤儲銆傛垜浠浉褰撲簬瀹炵幇浜嗚繖鏍蜂竴涓晜绌虹殑涓夎褰㈠浘褰€傚師鐞嗗浘濡備笅锛氳繖鏍蜂竴涓浘褰紝缁撳悎clip-path锛屽彲浠ュ緱鍒颁竴涓笁瑙掑舰鐨勮竟妗嗗浘褰紝浠€涔堟剰鎬濓紝鎴戣繖閲屽仛浜嗗姩鍥撅細宸﹁竟鏄娇鐢╩ask瀹炵幇mask鍚庣殑鍥惧舰锛屽彸杈规槸浣跨敤clip-path瑁佸壀鍚庣殑鍥惧舰锛屽皢瀹冧滑鐨勬晥鏋滃彔鍔犺捣鏉ワ紝瀹炵幇浜嗕竴涓猙ordertriangle銆傚綋鐒讹紝杩欓噷闇€瑕佷綘瀵筸ask鏈夋洿娣卞叆鐨勬帉鎻°€傞渶瑕佷娇鐢ㄩ伄缃╂潵鍒囧壊涓€涓晜绌虹殑涓夎褰㈠浘濡備笅锛歄K锛屽畬鏁翠唬鐮佸涓嬶細@property--angle{syntax:'';缁ф壙锛氬亣鐨勶紱鍒濆鍊硷細0deg;}div{瀹藉害锛?60px;楂樺害锛?60px锛涜儗鏅細鍦嗛敟姊害锛堟潵鑷獀ar(--angle)銆乭sl(162銆?00%銆?8%)銆乭sl(270銆?3%銆?3%)銆乭sl(162銆?00%銆?8%)锛涘壀杈戣矾寰勶細澶氳竟褰紙0100%锛?00%100%锛?0%0锛夛紱钂欑増锛氱嚎鎬ф笎鍙橈紙117deg锛?00055%锛岄€忔槑55%锛岄€忔槑锛夛紝绾挎€ф笎鍙橈紙-117deg锛?00055%锛岄€忔槑55%锛岄€忔槑锛夛紝绾挎€ф笎鍙橈紙#000锛?000锛夛紱閬僵浣嶇疆锛?0,130px0,0250px锛涢伄缃╁昂瀵革細130px250px锛?30px250px锛?00%10px锛涙帺鐮侀噸澶嶏細涓嶉噸澶嶏紱鍔ㄧ敾锛氭棆杞?s鏃犻檺绾挎€?}@keyframes鏃嬭浆{鍒皗--angle:360deg;}}寰楀埌涓€涓唴鍦ㄧ殑闀傜┖涓夎妗嗭細浣跨敤drop-shadow鏉ュ鍔犲厜褰便€傛渶鍚庝竴姝ユ瘮杈冪畝鍗曘€傜敱浜庝笂闈㈢殑涓夎褰㈠凡缁忔槸闀傜┖鐨勫浘褰紝鍙互鐩存帴浣跨敤drop-shadow缁欏厓绱犲姞涓婁竴灞傚厜褰辨晥鏋溿€備絾鏄紝鐢变簬浣跨敤浜哻lip-path锛岀洿鎺ュ湪鍘熷厓绱犱笂娣诲姞鐨刣rop-shadow鏃犳硶鏄剧ず锛岃繖涓緢瀹规槗瑙ｅ喅锛屾垜浠彧闇€瑕佸璁剧疆涓€灞傜粨鏋勶紝灏哾rop-shadow娣诲姞鍒扮埗鍏冪礌锛?divclass="g-container">

@property--angle{syntax:'';缁ф壙锛氬亣鐨勶紱鍒濆鍊硷細0deg;}.g-container{瀹藉害锛?60px;楂樺害锛?60px锛涜繃婊ゅ櫒锛氭姇褰憋紙005pxhsl锛?62銆?00%銆?8%锛夛級鎶曞奖锛?010pxhsl锛?70銆?3%銆?3%锛夛級锛泒.g-triangle{瀹藉害锛?60px锛涢珮搴︼細260px锛涜儗鏅細鍦嗛敟姊害锛堟潵鑷獀ar(--angle)銆乭sl(162銆?00%銆?8%)銆乭sl(270銆?3%銆?3%)銆乭sl(162銆?00%銆?8%)锛涘壀杈戣矾寰勶細澶氳竟褰紙0100%锛?00%100%锛?0%0锛夛紱钂欑増锛氱嚎鎬ф笎鍙橈紙117deg锛?00055%锛岄€忔槑55%锛岄€忔槑锛夛紝绾挎€ф笎鍙橈紙-117deg锛?00055%锛岄€忔槑55%锛岄€忔槑锛夛紝绾挎€ф笎鍙橈紙#000锛?000锛夛紱閬僵浣嶇疆锛?0,130px0,0250px锛涢伄缃╁昂瀵革細130px250px锛?30px250px锛?00%10px锛涙帺鐮侀噸澶嶏細涓嶉噸澶嶏紱鍔ㄧ敾锛氭棆杞?s鏃犻檺绾挎€?}@keyframes鏃嬭浆{鍒皗--angle:360deg;}}杩欓噷鍙堟槸涓€涓皬鎶€宸э紝drop-shAdow鍙互閲嶅娣诲姞銆傝繖閲屾坊鍔犵殑涓ょ闃村奖棰滆壊鏄痗onic-gradient()涓缃殑棰滆壊銆傛渶缁堝緱鍒板棰樺浘鎵€绀虹殑鏁堟灉锛氬畬鏁翠唬鐮佸彲浠ョ偣杩欓噷--CodePenDemo--PureCSSGlowingTriangle浣跨敤clip-path鍒囧壊鍦嗗舰涓夎褰€俢lip-path鐢ㄦ潵鍒囧壊澶栦笁瑙掞紝mask鎸栫┖鍐呬笁瑙掋€傛彁閱掍竴涓嬶紝clip-path鍏跺疄鍙互鑷繁鍒囧嚭涓€涓渾褰笁瑙掑舰銆備笂闈㈢殑浠ｇ爜涔熷彲浠ョ畝鍖栦负锛?divclass="g-container">