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

纯css布局实现小熊点击肢解效果

代码语言：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) tra.........完整代码请登录后点击上方下载按钮下载查看