div+css实现炫酷按钮走光动画效果代码-html代码-BFW代码库

div+css实现炫酷按钮走光动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现炫酷按钮走光动画效果代码

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

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

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

  
  
<style>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  --purple: #5b01ff;
  --dark-purple: #5c4dff;
  --white: #fff;
}

@font-face {
  font-family: "slava";
  src: url("//repo.bfw.wiki/bfwrepo/font/slava-antipov.ttf");
}

@property --c1 {
  syntax: "<percentage>";
  initial-value: 1%;
  inherits: false;
}

@property --c2 {
  syntax: "<percentage>";
  initial-value: 25%;
  inherits: false;
}

@property --t1 {
  syntax: "<percentage>";
  initial-value: 6%;
  inherits: false;
}

@property --t2 {
  syntax: "<percentage>";
  initial-value: 15%;
  inherits: false;
}

body {
  --c1: 1%;
  --t1: 6%;
  --t2: 15%;
  --c2: 25%;
}

@keyframes test {
  from {
    --c1: 1%;
    --t1: 17%;
    --t2: 27%;
    --c2: 37%;
  }

  to {
    --c1: 100%;
    --t1: 100%;
    --t2: 100%;
    --c2: 100%;
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}

.container {
  padding: 3rem 25rem;
}
.container-02 {
  padding: 3rem 25rem;
  -webkit-mask-image: linear-gradient(
    65deg,
    #000 var(--c1),
    transparent var(--t1),
    transparent var(--t2),
    #000 var(--c2)
  );
  animation: 6s ease-in 0s infinite reverse test;
}

body {
  min-height: 100vh;
  width: 100%;
  background-color: var(--purple);
  display: grid;
  place-items: center;
}

b.........完整代码请登录后点击上方下载按钮下载查看