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

代码语言:html

所属分类:动画

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

代码标签: svg css 图片 边框 走光 彩色 发光 动画

下面为部分代码预览,完整代码请点击下载或在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: 10.........完整代码请登录后点击上方下载按钮下载查看

网友评论0