css3动画边框渐变闪光效果的按钮

定义一个button按钮+div标签，样式直接复制下面的css代码就可以了！点击查看按钮效果！

@property --border-angle-1 {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --border-angle-2 {
  syntax: "<angle>";
  inherits: true;
  initial-value: 90deg;
}

@property --border-angle-3 {
  syntax: "<angle>";
  inherits: true;
  initial-value: 180deg;
}


:root {
  --bright-blue: rgb(0, 100, 255);
  --bright-green: rgb(0, 255, 0);
  --bright-red: rgb(255, 0, 0);
  --background: black;
  --foreground: white;
  --border-size: 2px;
  --border-radius: 0.75em;
}

@supports (color: color(display-p3 1 1 1)) {
  :root {
    --bright-blue: color(display-p3 0 0.2 1);
    --bright-green: color(display-p3 0.4 1 0);
    --bright-red: color(display-p3 1 0 0);
  }
}

@keyframes rotateBackground {
  to { --border-angle-1: 360deg; }
}

@keyframes rotateBackground2 {
  to { --border-angle-2: -270deg; }
}

@keyframes rotateBackground3 {
  to { --border-angle-3: 540deg; }
}

body {
  background: var(--background);
  color: var(--foreground);
  min-height: 100dvh;
  display: grid;
  place-content: center;
  margin: 0;
  font-family: "Aspekta";
}

button {
  --border-angle-1: 0deg;
  --border-angle-2: 90deg;
  --border-angle-3: 180deg;
  color: inherit;
  font-size: calc(0.8rem + 4vmin);
  font-family: inherit;
  border: 0;
  padding: var(--border-size);
  display: flex;
  width: max-content;
  border-radius: var(--border-radius);
  background-color: transparent;
  background-image: conic-gradient(
      from var(--border-angle-1) at 10% 15%,
      transparent,
      var(--bright-blue) 10%,
      transparent 30%,
      transparent
    ),
    conic-gradient(
      from var(--border-angle-2) at 70% 60%,
      transparent,
      var(--bright-green) 10%,
      transparent 60%,
      transparent
    ),
    conic-gradient(
      from var(--border-angle-3) at 50% 20%,
      transparent,
      var(--bright-red) 10%,
      transparent 50%,
      transparent
    );
  animation: 
    rotateBackground 3s linear infinite,
    rotateBackground2 8s linear infinite,
    rotateBackground3 13s linear infinite;
}

button div {
  background: var(--background); 
  padding: 1em 1.5em;
  border-radius: calc(var(--border-radius) - var(--border-size));
  color: var(--foreground);
}

利用纯css3做一个风车动画效果

js+css做一个menu图标动画效果

js+css3如何实现触发过渡动画效果

js+css3如何实现监听过渡动画结束事件

css3如何实现光点随着指定位置跑

标签： css3动画效果, css3按钮

上面是“css3动画边框渐变闪光效果的按钮”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_13708.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！