css圣诞老人实现表情动画-html代码-BFW代码库

css圣诞老人实现表情动画

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  @charset "UTF-8";
:root {
  --red: #DD001B;
  --white: #FEFEFC;
  --black: #010103;
  --beige: #EF9967;
  --green: #165B33;
  --green-dark: #0B2C19;
  --size: 40vmin;
  --pad: 2vmin;
  --bs-col: 0, 0, 0;
  --box-shadow-outer: 0 2vmin 2vmin -1vmin rgba(var(--bs-col), 0.15);
  --box-shadow-inner: inset 0 -2vmin 2vmin -1vmin rgba(var(--bs-col),
    0.15);
  --box-shadow-inner-dark: inset -2vmin -4vmin 3vmin -1vmin rgba(var(--bs-col),
    0.2);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: grid;
  grid-gap: var(--pad);
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto 1fr;
  align-items: start;
  justify-items: center;
  padding: var(--pad);
  max-width: 800px;
  margin: var(--pad) auto;
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: bold;
  background: var(--green);
}
@media (min-width: 600px) {
  body {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto 1fr;
  }
}

label {
  justify-self: stretch;
  cursor: pointer;
  border: 3px solid var(--green-dark);
  border-radius: 0.5rem;
  padding: 0.75rem 0.5rem 0.85rem;
  color: var(--green-dark);
  text-align: center;
  box-shadow: 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.15), inset 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.15);
}

i.........完整代码请登录后点击上方下载按钮下载查看