div+css实现6种按钮边框光效动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：div+css实现6种按钮边框光效动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1">


<style>
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&display=swap");

:root {
  --h: 222;
  --s: 20%;
  --l: 22%;
  
  --canvas: var(--h);
  --bg: hsl(var(--canvas), 15%, 22%);
  --fg: hsl(var(--canvas), 39%, 95%);
  --link: hsl(var(--canvas), 90%, 80%);
  --linkh: hsl(150, 95%, 70%);
  --wgt: 200;

  --light: hsl(var(--h), var(--s), 95%);
  --dark: hsl(var(--h), var(--s), 20%);
  --tint: hsl(160, 85%, 60%);
  --tint2: hsl(200, 85%, 60%);
  --pads: 16px;
  --cols: 1fr;
  
  --labels: hsl(var(--h), var(--s), 40%);
  --b: hsla(var(--h), var(--s), 100%, 1);
  --svg: var(--fg);
}

#app {
  display: grid;
  grid-template-columns: var(--cols);
  gap: var(--pads);
  min-height: 100%;
}

body {
  padding: calc(var(--pads) * 1.5);
  font-family: "Source Sans Pro", sans-serif;
  font-size: 1rem;
  background-color: #171820;
  background-image: linear-gradient(
    180deg,
    hsl(var(--h), var(--s), 8%),
    hsl(var(--h), var(--s), 14%)
  );
  background-size: cover;
}

body,
html {
  min-height: 100%;
}

* {
  box-sizing: border-box;
}

form {
  color: var(--fg);
  background-color: var(--bg);
  min-width: 100%;
  width: 100%;
  padding: calc(var(--pads) * 0.5) calc(var(--pads) * 1.5) calc(var(--pads) * 1);
  border-radius: 8px;
  box-shadow: 0 2px 3px hsla(var(--h), var(--s), 8%, 50%);
}

form {
  --bor: hsl(var(--h), var(--s), 85%);
  --bg: var(--light);
  --fg: var(--dark);
}

.dark {
  --bor: hsl(var(--h), var(--s), 35%);
  --bg: var(--dark);
  --fg: var(--light);
  --labels: hsl(var(--h), var(--s), 65%);
  --b: hsla(var(--h), var(--s), 12%, 1);
  --tint: hsl(260, 85%, 60%);
  --tint2: hsl(300, 85%, 60%);
}

fieldset {
  min-width: 100%;
  width: 100%;
  border: 1px solid var(--bor);
  border-radius: 5px;
  padding: var(--pads) calc(var(--pads) * 1.5);
  margin-block: var(--pads);
}

legend {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 2em;
  transform: translateX(-1em);
}

label {
  display: block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  font-size: 0.875rem;
  text-transform: uppercase;
  -webkit-margin-start: 0;
  margin-inline-start: 0;
  -webkit-margin-after: 0.5em;
  margin-block-end: 0.5em;
  color: var(--labels);
  transition: all 0.5s ease;
}

.field:focus-within label {
  color: var(--fg);
}

.field {
  margin-block: 2.5em;
}

.field:nth-of-type(1) {
  -webkit-margin-before: 1em;
  margin-block-start: 1em;
}

.field:nth-last-of-type(1) {
  -webkit-margin-after: 1em;
  margin-block-end: 1em;
}

input,
select,
button,
textarea {
  font-family: inherit;
  color: var(--fg);
  background: var(--b);
  padding: 0.875em;
  border-radius: 8px;
  border: 1px solid transparent;
  outline: 1px solid transparent;
  accent-color: var(--tint2);
  box-shadow: 0 3px 2px -3px var(--bor);
  transition: border 0.3s ease-in, outline 0.6s ease-in, box-shadow 0.6s ease-in;
}
input,
select, 
textarea {
  width: clamp(50%, 20em, 100%);
}
input:focus,
select:focus,
button:focus,
textarea:focus {
  border-color: var(--tint);
  outline-color: var(--tint2);
  transition: border 0.6s ease-out, outline 0.3s ease-out,
    box-shadow 0.3s ease-out;
}
input::-moz-placeholder,
select::-moz-placeholder,
button::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 0.33;
  font-style: italic;
}
input:-ms-input-placeholder,
select:-ms-input-placeholder,
button:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 0.33;
  font-style: italic;
}
input::-moz-placeholder, select::-moz-placeholder, button::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 0.33;
  font-style: italic;
}
input:-ms-input-placeholder, select:-ms-input-placeholder, button:-ms-input-placeholder, textarea:-ms-input-placeholder {
  opacity: 0.33;
  font-style: italic;
}
input::placeholder,
select::placeholder,
button::placeholder,
textarea::placeholder {
  opacity: 0.33;
  font-style: italic;
}

textarea {
  width: 100%;
  min-height: 10em;
  resize: vertical;
  display: block;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml; utf8, <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.2929,5.292875 C12.6834,4.902375 13.3166,4.902375 13.7071,5.292875 C14.0976,5.683375 14.0976,6.316555 13.7071,6.707085 L8.70711,11.707085 C8.31658,12.097605 7.68342,12.097605 7.29289,11.707085 L2.29289,6.707085 C1.90237,6.316555 1.90237,5.683375 2.29289,5.292875 C2.68342,4.902375 3.31658,4.902375 3.70711,5.292875 L8,9.585765 L12.2929,5.292875 Z"  style="fill: hsl(222,20%,40%);"/></svg>');
  background-size: 1em;
  background-position: calc(100% - 1em) 50%;
  background-repeat: no-repeat;
}
.dark select {
  background-image: url('data:image/svg+xml; utf8, <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.2929,5.292875 C12.6834,4.902375 13.3166,4.902375 13.7071,5.292875 C14.0976,5.683375 14.0976,6.316555 13.7071,6.707085 L8.70711,11.707085 C8.31658,12.097605 7.68342,12.097605 7.29289,11.707085 L2.29289,6.707085 C1.90237,6.316555 1.90237,5.683375 2.29289,5.292875 C2.68342,4.902375 3.31658,4.902375 3.70711,5.292875 L8,9.585765 L12.2929,5.292875 Z"  style="fill: hsl(222,20%,70%);"/></svg>');
}

input[type="radio"],
input[type="checkbox"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: calc(1em + 8px);
  height: calc(1em + 8px);
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 100%;
}
input[type="radio"],
input[type="radio"]:after,
input[type="checkbox"],
input[type="checkbox"]:after {
  transition: all 0.6s ease-in;
}
input[type="radio"]:focus,
input[type="radio"]:focus:after,
input[type="checkbox"]:focus,
input[type="checkbox"]:focus:after {
  transition: all 0.3s ease-out;
}
input[type="radio"]:after,
input[type="checkbox"]:after {
  content: "";
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background: transparent;
  border-radius: 100%;
  opacity: 0.9;
}
input[type="radio"]:checked:after,
input[type="checkbox"]:checked:after {
  background: var(--fg);
}
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  background-color: var(--tint);
}
input[type="radio"]:focus:after,
input[type="checkbox"]:focus:after {
  opacity: 1;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
  text-transform: none;
  display: inline-flex;
  padding: 0 0.25em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: none;
}
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
  font-weight: bold;
  font-style: italic;
  color: var(--fg);
}

input[type="checkbox"] {
  border-radius: 5px;
}
input[type="checkbox"]:after,
input[type="checkbox"]:focus:after {
  background-size: 1.2em;
  background-position: center;
  opacity: 0;
}
input[type="checkbox"]:checked:after {
  background: url('data:image/svg+xml; utf8, <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M13.7071,4.29289 C14.0976,4.68342 14.0976,5.31658 13.7071,5.70711 L7.70711,11.7071 C7.31658,12.0976 6.68342,12.0976 6.29289,11.7071 L3.29289,8.70711 C2.90237,8.31658 2.90237,7.68342 3.29289,7.29289 C3.68342,6.90237 4.31658,6.90237 4.70711,7.29289 L7,9.58579 L12.2929,4.29289 C12.6834,3.90237 13.3166,3.90237 13.7071,4.29289 Z"  style="fill: hsl(222,20%,40%);"/></svg>');
  background-size: 1.2em;
  background-position: center;
  opacity: 1;
}
.dark input[type="checkbox"]:checked:after {
  background-image: url('data:image/svg+xml; utf8, <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M13.7071,4.29289 C14.0976,4.68342 14.0976,5.31658 13.7071,5.70711 L7.70711,11.7071 C7.31658,12.0976 6.68342,12.0976 6.29289,11.7071 L3.29289,8.70711 C2.90237,8.31658 2.90237,7.68342 3.29289,7.29289 C3.68342,6.90237 4.31658,6.90237 4.70711,7.29289 L7,9.58579 L12.2929,4.29289 C12.6834,3.90237 13.3166,3.90237 13.7071,4.29289 Z"  style="fill: hsl(222,20%,95%);"/></svg>');
}

.range {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block: 1em;
}
.range label {
  margin: 0;
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
  text-transform: none;
  font-size: 0.75em;
}
.range:first-child {
  text-align: right;
}
.range:last-child {
  text-align: left;
}

input[type="range"] {
  --pad: calc(var(--pads) / 4);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: calc(100% - 1em);
  height: calc(1em + var(--pad) * 2);
  background: var(--b);
  border: none;
  outline: none;
  padding: 0 var(--pad);
  border-radius: 1em;
  &:not(:first-child) {
    -webkit-margin-start: 0.5em;
            margin-inline-start: 0.5em;
  }
  &:not(:last-child) {
    -webkit-margin-end: 0.5em;
            margin-inline-end: 0.5em;
  }
}
input[type="range"],
input[type="range"]* {
  transition: all 0.5s ease;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--tint) -25%, var(--tint2) 125%);
  display: block;
  width: calc(100% + var(--pad) * 2);
  height: calc(1em + var(--pad) * 2);
  border-radius: 1em;
  margin-inline: calc(var(--pad) * -1);
  -webkit-transition: opacity 0.5s ease-in, background 0.5s ease-in;
  transition: opacity 0.5s ease-in, background 0.5s ease-in;
  opacity: 0;
  will-change: opacity, background;
  background: var(--b);
  padding: 0.25em var(--pad);
  opacity: 1;
}

input[type="range"]::-moz-range-track {
  background: linear-gradient(90deg, var(--tint) -25%, var(--tint2) 125%);
  display: block;
  width: calc(100% + var(--pad) * 2);
  height: calc(1em + var(--pad) * 2);
  border-radius: 1em;
  margin-inline: calc(var(--pad) * -1);
  -moz-transition: opacity 0.5s ease-in, background 0.5s ease-in;
  transition: opacity 0.5s ease-in, background 0.5s ease-in;
  opacity: 0;
  will-change: opacity, background;
}

input[type="range"]::-ms-track {
  background: linear-gradient(90deg, var(--tint) -25%, var(--tint2) 125%);
  display: block;
  width: calc(100% + var(--pad) * 2);
  height: calc(1em + var(--pad) * 2);
  border-radius: 1em;
  margin-inline: calc(var(--pad) * -1);
  -ms-transition: opacity 0.5s ease-in, background 0.5s ease-in;
  transition: opacity 0.5s ease-in, background 0.5s ease-in;
  opacity: 0;
  will-change: opacity, background;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1em;
  height: 1em;
  border: none;
  outline: none;
  background: var(--fg);
  border-radius: 1em;
  transform: translate3d(0, 0, 0);
}

input[type="range"]::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  width: 1em;
  height: 1em;
  border: none;
  outline: none;
  background: var(--fg);
  border-radius: 1em;
  transform: translate3d(0, 0, 0);
}

input[type="range"]::-ms-thumb {
  appearance: none;
  width: 1em;
  height: 1em;
  border: none;
  outline: none;
  background: var(--fg);
  border-radius: 1em;
  transform: translate3d(0, 0, 0);
}

input[type="range"]:focus::-webkit-slider-runnable-track {
  -webkit-transition: background 0.5s ease-out;
  transition: background 0.5s ease-out;
  background: linear-gradient(90deg, var(--tint) -25%, var(--tint2) 125%);
  opacity: 1;
}

input[type="range"]:focus::-moz-range-track {
  -moz-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
  opacity: 1;
}

input[type="range"]:focus::-ms-track {
  -ms-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
  opacity: 1;
}

input[type="color"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  max-width: 4em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5em;
  padding: 5px;
  border-radius: 10em;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: inherit;
  display: block;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: inherit;
}

input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: inherit;
  display: block;
}

input[type="color"]::-moz-color-swatch-wrapper {
  padding: 0;
  border-radius: inherit;
}

.buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
}

button {
  display: flex;
  align-items: center;
  gap: 0.5em;
  background: hsl(var(--h), var(--s), 90%);
  text-transform: uppercase;
  padding-inline: 2em;
  box-shadow: inset 0 0 0 1px transparent;
  transition: all 0.3s ease;
}
.dark button {
  background: hsl(var(--h), var(--s), 15%);
}
button:hover {
  opacity: 0.8;
  box-shadow: inset 0 0 0 1px var(--fg);
}
button[type="submit"] {
  --svg: var(--bg);
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
}

svg {
  fill: var(--svg);
  height: 1.5em;
  width: auto;
}

.group {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  margin-block: 1em;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
.group input + label {
  display: inline-block;
  margin-block: 0;
  padding: 0.5em 1em;
  -webkit-margin-end: 2em;
  margin-inline-end: 2em;
}

@media screen and (min-width: 600px) {
  .group {
    grid-template-columns: repeat(2, auto 1fr);
  }
}
@media screen and (min-width: 1200px) {
  .group {
    grid-template-columns: repeat(4, auto 1fr);
  }
}

a {
  color: var(--link);
  text-decoration: none;
  font-weight: 450;
  transition: all 0.3s ease;
}
a:hover,
a:focus,
a:active {
  color: var(--linkh);
}
.social-icon {
  stroke-width: 1.25;
  stroke: currentColor;
  fill: transparent;
  background: transparent;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  z-index: 10;
 .........完整代码请登录后点击上方下载按钮下载查看