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;
}

button {
  border: none;
  cursor: pointer;
  display: inline-flex;
  height: auto;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
  color: var(--white);
  padding: 8px;
  border-radius: 200px;
  background: linear-gradient(180deg, #7a78ff, transparent);
  background-color: var(--dark-purple);
}
.inner-button {
  background: linear-gradient(180deg, #7a78ff, transparent);
  border-radius: 200px;
  background-color: var(--dark-purple);
  padding: 24px 104px;
  display: block;
}

.button-02 {
  border: none;
  display: inline-flex;
  height: auto;
  color: var(--white);
  padding: 9px 18px;

  box-shadow: rgb(0 0 0 / 50%) 0px 7px 8px -9px,
    rgb(64 56 255) 0px -8px 11px inset;
  border-radius: 200px;
  background-image: linear-gradient(
    hsl(238deg 100% 69%),
    hsl(238de.........完整代码请登录后点击上方下载按钮下载查看