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

代码语言：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);
  position: relative;
  display: flex;
  justify-content: center;
  z-index: 2;
  box-shadow: var(--box-shadow-outer), var(--box-shadow-inner);
}
.front:before {
  width: calc(var(--size) / 1);
  height: calc(var(--size) / 4);
  border-radius: 2vmin 2vmin 2vmin 2vmin;
  background-color: var(--white);
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  box-shadow: var(--box-shadow-outer), var(--box-shadow-inner-dark);
}

.tail {
  width: calc(var(--size) / 6);
  height: calc(var(--size) / 3.5);
  border-radius: 0 5vmin 0.5vmin 0;
  background-color: var(--red);
  position: absolute;
  top: 0;
  left: 95%;
  display: flex;
  justify-content: center;
  box-shadow: var(--box-shadow-outer), var(--box-shadow-inner-dark);
}
.tail:before {
  width: calc(var(--size) / 3);
  height: calc(var(--size) / 3);
  border-radius: 100%;
  background-color: var(--white);
  content: '';
  display: block;
  position: absolute;
  top: 94%;
  z-index: -1;
  box-shadow: var(--box-shadow-outer), var(--box-shadow-inner-dark);
}

.eye {
  width: calc(var(--size) / 20);
  height: calc(var(--size) / 20);
  border-radius: 100%;
  background-color: var(--black);
  position: absolute;
  top: 40%;
  display: flex;
  justify-content: center;
  z-index: 3;
  animation: blink 4s ease-out infinite;
}
.eye.left {
  left: 30%;
}
.eye.right {
  right: 30%;
}
@keyframes blink {
  2.5% {
    transform: scaleY(0.1);
  }
  5%, 100% {
    transform: scaleY(1);
  }
}
.brow {
  position: absolute;
  top: 31%;
  box-shadow: var(--box-shadow-outer), var(--box-shadow-inner);
  z-index: 4;
  animation: dip 4s ease-out infinite;
}
.brow.left {
  width: calc(var(--size) / 5);
  height: calc(var(--size) / 10);
  border-radius: 20vmin 20vmin 20vmin 0;
  background-color: var(--white);
  left: 20%;
}
.brow.right {
  width: calc(var(--size) / 5);
  height: calc(var(--size) / 10);
  border-radius: 20vmin 20vmin 0 20vmin;
  background-color: var(--white);
  right: 20%;
}
@keyframes dip {
  2.5% {
    transform: translateY(0.5vmin);
  }
  5%, 100% {
    transform: translateY(0);
  }
}
.nose {
  width: calc(var(--size) / 5);
  height: calc(var(--size) / 5);
  border-radius: 100%;
  background-color: var(--beige);
  position: absolute;
  top: 40%;
  z-index: 4;
  box-shadow: var(--box-shadow-outer), var(--box-shadow-inner);
}

.mustache {
  position: absolute;
  top: 50%;
  flex: 1 0 100%;
  display: flex;
  justify-content: center;
  z-index: 3;
}
.mustache:before, .mustache:after {
  content: '';
  display: block;
  transform: rotate(0.001deg);
  box-shadow: var(--box-shadow-outer), var(--box-shadow-inner);
}
.mustache:before {
  width: calc(var(--size) / 2);
  height: calc(var(--size) / 5);
  border-radius: 20vmin 0 20vmin 0;
  background-color: var(--white);
  margin-right: -2vmin;
}
.mustache:after {
  width: calc(var(--size) / 2);
  height: calc(var(--size) / 5);
  border-radius: 0 20vmin 0 20vmin;
  background-color: var(--white);
}

.mouth {
  width: calc(var(--size) / 5);
  height: calc(var(--size) / 5);
  border-radius: 100%;
  background-color: var(--black);
  position: absolute;
  bottom: 25%;
  z-index: 2;
  transform-origin: 50% 0;
  transform: scaleY(0.1);
}

.beard {
  width: calc(var(--size) / 1.25);
  height: calc(var(--size) / 1.5);
  border-radius: 0 0 20vmin 20vmin;
  background-color: var(--white);
  position: absolute;
  top: 55%;
  box-shadow: var(--box-shadow-outer), var(--box-shadow-inner-dark);
}

.ear {
  position: absolute;
  top: 35%;
  display: flex;
  justify-content: center;
  z-index: -1;
  box-shadow: var(--box-shadow-outer), var(--box-shadow-inner);
}
.ear.left {
  width: calc(var(--size) / 20);
  height: calc(var(--size) / 6);
  border-radius: 10vmin 0 0 10vmin;
  background-color: var(--beige);
  right: 100%;
  transform: translateX(0.001%);
}
.ear.right {
  width: calc(var(--size) / 20);
  height: calc(var(--size) / 6);
  border-radius: 0 10vmin 10vmin 0;
  background-color: var(--beige);
  left: 100%;
  transform: translateX(-0.001%);
}

[id="hella-naughty"]:checked ~ .santa {
  animation: hella-head-raise 600ms ease-out forwards;
}
[id="hella-naughty"]:checked ~ .santa .eye {
  background-color: transparent;
  animation: none;
  z-index: 5;
}
[id="hella-naughty"]:checked ~ .santa .eye:before {
  content: '🔥';
  font-size: 3.5vmin;
  position: absolute;
  top: -1vmin;
  animation: hella-eyes 400ms ease-out forwards;
}
[id="hella-naughty"]:checked ~ .santa .hat {
  animation: hella-hat 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
[id="hella-naughty"]:checked ~ .santa .nose {
  animation: hella-nose 400ms linear forwards;
}
[id="hella-naughty"]:checked ~ .santa .brow.left {
  animation: hella-brow-left 400ms ease-out forwards;
}
[id="hella-naughty"]:checked ~ .santa .brow.right {
  animation: hella-brow-right 400ms ease-out forwards;
}
[id="hella-naughty"]:checked ~ .santa .mustache:before {
  animation: hella-stache-left 400ms ease-out forwards;
}
.........完整代码请登录后点击上方下载按钮下载查看