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);
}

input {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
input:active + label {
  box-shadow: 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.1), inset 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.1);
  transform: translateY(1px);
}
input:checked + label {
  border-color: white;
  color: white;
  box-shadow: none;
  transform: translateY(1px);
}

.santa {
  width: calc(var(--size) / 1.25);
  height: calc(var(--size) / 1);
  border-radius: 10vmin 10vmin 100% 100%;
  background-color: var(--beige);
  grid-column: 1 / -1;
  align-self: center;
  position: relative;
  display: flex;
  justify-content: center;
  box-shadow: var(--box-shadow-outer), var(--box-shadow-inner-dark);
  transform: translateZ(0);
}

.hat {
  position: absolute;
  bottom: 66%;
  display: flex;
  justify-content: center;
}

.front {
  width: calc(var(--size) / 1.25);
  height: calc(var(--size) / 1.5);
  border-radius: 20vmin 1vmin 0 0;
  background-color: var(--red);
.........完整代码请登录后点击上方下载按钮下载查看