css+svg实现可调参数卡片背景渐变脉冲动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css+svg实现可调参数卡片背景渐变脉冲动画效果代码

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel='stylesheet' href='https://fonts.bunny.net/css?family=amaranth:400,400i,700,700i|asap:200,300i,400,400i,500,500i,600,600i,700,700i|asap-condensed:200,300i,400,400i,600,600i,700,700i,900,900i|kode-mono:400,500,600,700'>
  
<style>
@import url(https://fonts.bunny.net/css?family=amaranth:400,400i,700,700i|asap-condensed:200,300i,400,400i,600,700,900|kode-mono:400,500,600,700);

: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;
  --radius: 16px;
  
  --labels: hsl(var(--h), var(--s), 55%);
  --b: hsla(var(--h), var(--s), 100%, 1);
  --svg: var(--fg);
  
  --thumb-shadow: 
      0px 1px 0px rgba(17,17,26,0), 
      0px 2px 2px rgba(17,17,26,0), 
      0px 4px 4px rgba(17,17,26,0);
  
  --thumb-shadow-on: 
      0px 1px 0px rgba(17,17,26,0.2), 
      0px 2px 6px rgba(17,17,26,0.2), 
      0px 4px 12px rgba(17,17,26,0.2);
  
  --spring: linear(
    0, 0.009, 0.035 2.1%, 0.142 4.6%, 0.283 6.9%, 0.726 13.3%, 0.941 17.2%, 1.02,
    1.08, 1.124, 1.153 24.9%, 1.163, 1.167, 1.165, 1.157 30.7%, 1.132 33.7%,
    1.051 40.7%, 1.017 44.2%, 0.99, 0.975 52.2%, 0.972 55.2%, 0.974 58.5%,
    0.996 71.5%, 1.003, 1.005 85.7%, 1
  );
    
  --bounce: linear(0, 0.199 14.6%, 0.37 23.8%, 0.591 32.2%, 0.999 44.7%, 0.793 52.7%, 
    0.745 56.1%, 0.728 59.5%, 0.74 62.5%, 0.778 65.7%, 0.999 77.4%, 0.956 81.3%, 0.943 
    84.9%, 0.951 88%, 0.993 95.5%, 1);
    
}

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

body {
  padding: calc(var(--pads) * 1.5);
  font-family: 'Asap Condensed', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--fg);
  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,
.form {
  --bor: hsl(var(--h), var(--s), 85%);
  --bg: var(--light);
  --fg: var(--dark);
}

form,
.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: var(--radius);
  box-shadow: 0 2px 3px hsla(var(--h), var(--s), 8%, 50%);
}

.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: calc(var(--radius) / 2);
  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: calc(var(--radius) / 2);
  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%);".........完整代码请登录后点击上方下载按钮下载查看