纯css布局实现小熊点击肢解效果-html代码-BFW代码库

代码语言：html

代码描述：纯css布局实现小熊点击肢解效果

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


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

<style>
* {
  box-sizing: border-box;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
:root {
  --base: #ff8400;
  --ear: #ffd500;
  --stroke: #341f1d;
  --white: #fff;
  --desired: 40;
  --unit: calc((var(--desired) / 729) * 1vmin);
  --body: 23;
  --arms: 0;
  --legs: 14;
  --ears: -10;
  --head: -25;
  --face: -40;
}
h1 {
  position: fixed;
  font-family: sans-serif;
  right: 1rem;
  bottom: 1rem;
  color: #f66;
  margin: 0;
}
body {
  min-height: 100vh;
  background: #f99;
  overflow: hidden;
}
.rilakkuma {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  height: calc(729 * var(--unit));
  width: calc(600 * var(--unit));
}
label {
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 2;
}
input {
  height: 0;
  width: 0;
  opacity: 0;
  left: 100%;
  position: fixed;
}
:checked ~ .rilakkuma {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1200px;
          perspective: 1200px;
  -webkit-transform: translate(-50%, -50%) rotateX(10deg) rotateY(-65deg);
          transform: translate(-50%, -50%) rotateX(10deg) rotateY(-65deg);
}
:checked ~ .rilakkuma .rilakkuma__body {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translate(-50%, 0) translate3d(0, 0, calc(var(--body) * 1vmin));
          transform: translate(-50%, 0) translate3d(0, 0, calc(var(--body) * 1vmin));
}
:checked ~ .rilakkuma .rilakkuma__leg {
  -webkit-transform: translate3d(0, 0, calc(var(--legs) * 1vmin));
          transform: translate3d(0, 0, calc(var(--legs) * 1vmin));
}
:checked ~ .rilakkuma .rilakkuma__leg--right {
  -webkit-transform: rotateY(180deg) rotate(-6deg) translate(0, -3%) translate3d(0, 0, calc(var(--legs) * -1vmin));
          transform: rotateY(180deg) rotate(-6deg) translate(0, -3%) translate3d(0, 0, calc(var(--legs) * -1vmin));
}
:checked ~ .rilakkuma .rilakkuma__arm {
  -webkit-transform: translate3d(0, 0, calc(var(--arms) * -1vmin));
          transform: translate3d(0, 0, calc(var(--arms) * -1vmin));
}
:checked ~ .rilakkuma .rilakkuma__arm--right {
  -webkit-transform: rotateY(180deg) translate3d(0, 0, calc(var(--arms) * 1vmin));
          transform: rotateY(180deg) translate3d(0, 0, calc(var(--arms) * 1vmin));
}
:checked ~ .rilakkuma .rilakkuma__head-container {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
:checked ~ .rilakkuma .rilakkuma__head-container .rilakkuma__ear {
  -webkit-transform: translate3d(0, 0, calc(var(--ears) * 1vmin));
          transform: translate3d(0, 0, calc(var(--ears) * 1vmin));
}
:checked ~ .rilakkuma .rilakkuma__head-container .rilakkuma__ear--right {
  -webkit-transform: rotateY(180deg) translate3d(0, 0, calc(var(--ears) * -1vmin));
          transform: rotateY(180deg) translate3d(0, 0, calc(var(--ears) * -1vmin));
}
:checked ~ .rilakkuma .rilakkuma__head-container .rilakkuma__head {
  -webkit-transform: translate3d(0, 0, calc(var(--head) * 1vmin));
          transform: translate3d(0, 0, calc(var(--head) * 1vmin));
}
:checked ~ .rilakkuma .rilakkuma__head-container .rilakkuma__face {
  -webkit-transform: translate(-50%, 0) translate3d(0, 0, calc(var(--face) * 1vmin));
          transform: translate(-50%, 0) translate3d(0, 0, calc(var(--face) * 1vmin));
}
:checked ~ .rilakkuma .rilakkuma__head-container .rilakkuma__eye {
  -webkit-animation-name: blink-forward;
          animation-name: blink-forward;
}
.rilakkuma {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.rilakkuma * {
  position: absolute;
}
.rilakkuma__head-container {
  height: 49.5%;
  width: 78%;
  top: 11.5%;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.rilakkuma__head {
  background: var(--base);
  height: 100%;
  width: 100%;
  border-radius: 50% 50% 35% 35%/65% 65% 35% 35%;
  border: calc(var(--unit) * 13) solid var(--stroke);
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.rilakkuma__ear {
  height: 52%;
  width: 40%;
  background: var(--base);
  top: -15.5%;
  left: -8%;
  border: calc(var(--unit) * 13) solid var(--stroke);
  border-radius: 50%;
  overflow: hidden;
}
.rilakkuma__ear:after {
  content: '';
  position: absolute;
  top: 41%;
  left: -19%;
  background: var(--ear);
  height: 60%;
  width: 66%;
  border-radius: 50%;
  border: calc(var(--unit) * 13) solid var(--stroke);
}
.rilakkuma__ear--right {
  left: 68%;
  top: -12%;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.rilakkuma__ear--right:after {
  top: 32%;
}
.rilakkuma__eye {
  background: var(--stroke);
  top: 54.25%;
  left: 21.5%;
  height: calc(var(--unit) * 50);
  width: calc(var(--unit) * 50);
  border-radius: 50%;
  -webkit-animation: blink 5s infinite;
          animation: blink 5s infinite;
}
.rilakkuma__eye--right {
  left: 66%;
  top: 55.5%;
}
@-webkit-keyframes blink {
  0%, 49%, 51%, 100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  50% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}
@keyframes blink {
  0%, 49%, 51%, 100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  50% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}
.rilakkuma__face {
  height: 28%;
  width: 29.5%;
  background: var(--white);
  border-radius: 50% 50% 35% 45%/50% 50% 50% 50%;
  top: 58.5%;
  left: 49%;
  -webkit-transform: translate(-50%, 0) translate3d(0, 0, 0);
          transform: translate(-50%, 0) translate3d(0, 0, 0);
}
.rilakkuma__mouth {
  height: calc(var(--unit) * 30);
  width: calc(var(--unit) * 30);
  background: var(--stroke);
  border-radius: 50%;
  top: 21%;
  left: 49%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.rilakkuma__mouth:before,
.rilakkuma__mouth:after {
  content: '';
  background: var(--stroke);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -.........完整代码请登录后点击上方下载按钮下载查看