svg+css实现9种图片边框走光彩色发光动画效果代码-html代码-BFW代码库

svg+css实现9种图片边框走光彩色发光动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现9种图片边框走光彩色发光动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Playwrite+IS&display=swap");
@property --a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
html, body, main {
  display: grid;
}

html {
  min-height: 100%;
}

body {
  background: #0a0a12;
}

body, main {
  place-content: center;
}

main {
  grid-gap: calc(3*var(--m)*var(--b));
  grid-template-columns: repeat(auto-fit, min(100%, 15em));
}

svg[aria-hidden=true] {
  position: fixed;
}

h1 {
  margin: 0 0.25em 2rem;
  color: #dedede;
  font: clamp(.625em, 1.5vw + 2vh, 3.75em) playwrite is, cursive;
  text-align: center;
  text-wrap: balance;
}

img {
  box-sizing: border-box;
  border: solid var(--b) #0000;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(2*var(--b));
  background: repeating-conic-gradient(from var(--a, 0deg), var(--l, #0000 0% 70%, #0000ff7f)) border-box;
  filter: var(--f, url(#glow-0));
  animation: a 12s linear infinite;
}

@keyframes a {
  to {
    --a: 1turn ;
  }
}
</style>


  
  
</head>

  <body style="--b: 6px; --m: 2">
  <svg width="0" height="0" aria-hidden="true">
    <filter id="glow-0" x="-25%" y="-25%" width="150%" height="150%">
      <feComponentTransfer>
        <feFuncA type="table" tableValues="0 2 0"></feFuncA>
      </feComponentTransfer>
      <feGaussianBlur stdDeviation="2"></feGaussianBlur>
      <feComponentTransfer result="rond">
        <feFuncA type="table" tableValues="-2 3"></feFuncA>
      </feComponentTransfer>
      <feMorphology operator="dilate" radius="3"></feMorphology>
      <feGaussianBlur stdDeviation="6"></feGaussianBlur>
      <feBlend in="rond" result="glow"></feBlend>
      <feComponentTransfer in="SourceGraphic">
        <feFuncA type="table" tableValues="0 0 1"></feFuncA>
      </feComponentTransfer>
      <feBlend in2="glow"></feBlend>
    </filter>
    <filter id="glow-1" x="-25%" y="-25%" width="150%" height="150%">
      <feComponentTransfer in="SourceGraphic" result="grad">
        <feFunc.........完整代码请登录后点击上方下载按钮下载查看