vue编写一个背景css样式代码生成器效果-html代码-BFW代码库

代码语言：html
所属分类：背景
代码描述：vue编写一个背景css样式代码生成器效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
  
<style>
@import url("https://fonts.googleapis.com/css?family=Pontano+Sans|Covered+By+Your+Grace");
:root {
  --base: #363639;
  --base-light: #464649;
  --base-dark: #262629;
  --base-shade: #303033;
  --base-text: #7db69d;
  --label: #e9dfde;
  --label-text: #b18373;
  --accent: rgba(35,35,35,.7);
  --button: rgba(40,40,43,.7);
}

body {
  background-image: repeating-linear-gradient(var(--a), rgba(var(--bg-rgb), 0) 0, var(--line-y), var(--c2) calc(var(--y) - var(--l)), var(--c2) var(--y)), repeating-linear-gradient(var(--b), rgba(var(--bg-rgb), 0) 0, var(--line-x), var(--c1) calc(var(--x) - var(--l)), var(--c1) var(--x));
  background-color: var(--bg);
  background-size: var(--size);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  font-family: 'Pontano Sans', Helvetica, sans-serif;
  display: -webkit-box;
  display: flex;
}

main {
  -webkit-box-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}

button,
select {
  border: none;
  border: 1px inset var(--button);
  padding: .7em 1em;
  border-radius: .35em;
  color: #fff;
  font: inherit;
  background: var(--button);
  cursor: pointer;
  outline: none;
  will-change: transform;
  -webkit-transition: -webkit-transform 200ms ease-out;
  transition: -webkit-transform 200ms ease-out;
  transition: transform 200ms ease-out;
  transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
}
button:active,
select:active {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
button[disabled],
select[disabled] {
  opacity: .7;
  cursor: not-allowed;
}

::-webkit-input-placeholder {
  opacity: .4;
  font-family: 'Pontano Sans', Helvetica, sans-serif;
  font-size: .7em;
  color: var(--label-text);
}

::-moz-placeholder {
  opacity: .4;
  font-family: 'Pontano Sans', Helvetica, sans-serif;
  font-size: .7em;
  color: var(--label-text);
}

:-ms-input-placeholder {
  opacity: .4;
  font-family: 'Pontano Sans', Helvetica, sans-serif;
  font-size: .7em;
  color: var(--label-text);
}

::-ms-input-placeholder {
  opacity: .4;
  font-family: 'Pontano Sans', Helvetica, sans-serif;
  font-size: .7em;
  color: var(--label-text);
}

::placeholder {
  opacity: .4;
  font-family: 'Pontano Sans', Helvetica, sans-serif;
  font-size: .7em;
  color: var(--label-text);
}

.menu select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-block;
  padding: .4em;
  font-size: inherit;
  text-transform: uppercase;
  color: inherit;
  border: none;
  background: rgba(0, 0, 0, 0.1);
  border-radius: .2em;
}

.cue {
  width: 7em;
  height: 7em;
  padding: 1em;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  cursor: pointer;
  will-change: transform;
  -webkit-transition: -webkit-transform 200ms cubic-bezier(1, 0, 0.2, 1.25);
  transition: -webkit-transform 200ms cubic-bezier(1, 0, 0.2, 1.25);
  transition: transform 200ms cubic-bezier(1, 0, 0.2, 1.25);
  transition: transform 200ms cubic-bezier(1, 0, 0.2, 1.25), -webkit-transform 200ms cubic-bezier(1, 0, 0.2, 1.25);
}
.cue:active {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
.cue svg {
  fill: var(--c2-contrast);
}

label {
  display: block;
  padding: .3em;
}

textarea {
  font-size: 1.2em;
  font-family: monospace;
  padding: .5em;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  resize: none;
  -webkit-box-flex: 1;
          flex: 1;
  outline: none;
  background: var(--accent);
  color: rgba(255, 255, 255, 0.7);
}

.input-text {
  width: 100%;
  font-size: 2em;
  font-family: 'Covered By Your Grace', fantasy, serif;
  color: #5c69c2;
  border: 0;
  background: transparent;
  padding: 0em .5em;
  line-height: 1;
  outline: none;
}

.color-well {
  width: 2.75em;
  height: 2.75em;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 0.3em solid var(--base-shade);
  box-shadow: 0 0 0 1px #000 inset, 0 0.3em 1em rgba(0, 0, 0, 0.8) inset;
  cursor: pointer;
  -webkit-transform: translateZ(1em);
          transform: translateZ(1em);
}
.color-well.color-bg {
  background: var(--bg);
}
.color-well.color-a {
  background: var(--c2);
}
.color-well.color-b {
  background: var(--c1);
}
.color-well input[type=color] {
  opacity: 0;
  font-size: 0;
}

header {
  font-size: 1.3em;
  font-weight: 200;
  -webkit-box-flex: 1;
          flex: 1;
}

.controls {
  position: relative;
  -webkit-box-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  border: 3px solid var(--base);
  border-color: var(--base-dark) var(--base-light) var(--base-light) var(--base-dark);
  box-shadow: 0 0 1.5em -.5em #000 inset;
  overflow: hidden;
}
.controls section {
  z-index: 1;
}

section {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
section > * {
  display: -webkit-box;
  display: flex;
}

.height-100 {
  height: 100%;
}

.row {
  display: -webkit-box;
  display: flex;
}

.flex-1 {
  -webkit-box-flex: 1;
          flex: 1;
}

.flex-2 {
  -webkit-box-flex: 2;
          flex: 2;
}

.column {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}

.space-around {
  justify-content: space-around;
}

.center {
  -webkit-box-pack: center;
          justify-content: center;
}

.align-center {
  -webkit-box-align: center;
          align-items: center;
}

.switch {
  cursor: pointer;
}
.switch input {
  opacity: 0;
  position: absolute;
}
.switch input + * {
  display: inline-block;
  padding: .4em;
  color: inherit;
  background: rgba(0, 0, 0, 0.1);
  border-radius: .2em;
}
.switch input:checked + * {
  background: var(--accent);
}
.switch button {
  display: inline-block;
  text-transform: uppercase;
  padding: .4em;
  margin: .3em;
  color: inherit;
  background: rgba(0, 0, 0, 0.1);
  border-radius: .2em;
  border: none;
  white-space: nowrap;
}

.rad-slider {
  --degree: 0deg;
  --degree-reverse: calc(0deg - var(--degree));
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  margin: 0em;
  border-radius: 50%;
  -webkit-transform: rotate(var(--degree));
          transform: rotate(var(--degree));
}
.rad-slider .label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  -webkit-transform: rotate(var(--degree-reverse));
          transform: rotate(var(--degree-reverse));
}
.rad-slider:hover {
  cursor: -webkit-grab;
}
.rad-slider.moving {
  cursor: -webkit-grabbing;
}

.rad-slider:not(.dirty) .label {
  opacity: 1;
}
.rad-slider .label {
  position: absolute;
  left: 50%;
  top: 5%;
  width: 6em;
  height: 6em;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-transition: opacity 2000ms linear 2000ms;
  transition: opacity 2000ms linear 2000ms;
  opacity: .5;
  -webkit-transform: translate(-50%, -100%) rotate(var(--degree-reverse));
          transform: translate(-50%, -100%) rotate(var(--degree-reverse));
}
.rad-slider:hover .label {
  -webkit-transition-duration: 600ms;
          transition-duration: 600ms;
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
  opacity: 1;
}
.rad-slider[name=a] {
  border-top-color: var(--c2);
}
.rad-slider[name=b] {
  border-top-color: var(--c1);
}

.spool {
  width: 12em;
  height: 12em;
  box-shadow: 0 0 0 .15em inset, 0 0 0 .15em, 0 0 0 4.5em #26292c;
  border: .9em double;
  border-top: .9em solid orange;
}

.color-wheel {
  width: 12em;
  height: 12em;
  border: .9em solid;
  box-shadow: 0 0 .3em -.15em #000, 0 0 .3em -.15em #000 inset;
}

.color-wheel span {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  po.........完整代码请登录后点击上方下载按钮下载查看