css实现多种生日卡片背景效果代码-html代码-BFW代码库

css实现多种生日卡片背景效果代码

代码语言：html

所属分类：背景

代码描述：css实现多种生日卡片背景效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #f5f5f5;
  height: 100vh;
  padding-top: 2vw;
  text-align: center;
}

#Palette1:checked ~ main {
  --color_1: #c8e8e5;
  --color_2: #f9eb9b;
  --color_3: #f3e5f5;
  --color_1_darken: #b2dcd9;
  --color_2_darken: #f3e38b;
  --color_3_darken: #e9d3ec;
}

#Palette2:checked ~ main {
  --color_1: #f7bcb8;
  --color_2: #c8e6c9;
  --color_3: #a5a5e8;
  --color_1_darken: #f5a59f;
  --color_2_darken: #b1dcb4;
  --color_3_darken: #8989da;
}

#Palette3:checked ~ main {
  --color_3: #ff9c95;
  --color_1: #388e3c;
  --color_2: #363472;
  --color_3_darken: #f5857e;
  --color_1_darken: #2f7b32;
  --color_2_darken: #201f4a;
}

#Palette4:checked ~ main {
  --color_1: #fffb86;
  --color_3: #8698ff;
  --color_2: #ff868e;
  --color_1_darken: #f3ed4b;
  --color_3_darken: #697def;
  --color_2_darken: #f16b74;
}

.theme-switch__label {
  font-family: "Quicksand", sans-serif;
  font-size: 1.5vw;
  margin-right: 2vw;
  color: #444444;
  cursor: pointer;
}

.wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100vw;.........完整代码请登录后点击上方下载按钮下载查看