利用css3做一个动态炫彩三角边框（结合clip-path+animation）

如何利用css3做一个动态炫彩三角边框，下面编程教程网小编结合clip-path和animation给大家详细介绍一下实现代码！

html代码

<div class="container">
  <div class="triangle"></div>
</div>

css代码

body{
  background:#000;
  padding:100px;
}
@property --angle {
  syntax: '';
  inherits: false;
  initial-value: 0deg;
}
.container {
  width: 260px;
  height: 260px;
  filter: drop-shadow(0 0 5px hsl(162, 100%, 58%)) drop-shadow(0 0 10px hsl(270, 73%, 53%));
}
.triangle {
  width: 200px;
  height: 200px;
  clip-path: 
    polygon(
    50% 0%,
    0% 100%,
    8% 100%,
    50% 15%,
    88% 93%,
    7% 93%,
    7% 100%,
    100% 100%
  );
  background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));
  animation: rotate 3s infinite linear;
}
@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

以上是编程学习网小编为您介绍的“利用css3做一个动态炫彩三角边框（结合clip-path+animation）”的全面内容，想了解更多关于 前端知识 内容，请继续关注编程基础学习网。