纯css布局实现一个三维木状狗狗效果-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：纯css布局实现一个三维木状狗狗效果

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


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

<style>
:root {
  --color-a1: #FFD297;
  --color-a2: #F9B470;
  --color-a3: #DE9F5D;
  --color-a4: #cc9154;
}

/***********************/
/***********************/
/************************/
/* Mixin para crear cubo ( Caras siempre al frente ) */
/************************/
/**/
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
}

/* Generic */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #1d1d1f;
  cursor: pointer;
  font-size: 1vw;
  font-family: monospace;
  color: #FFFFFF;
}

/***********************/
.main {
  display: flex;
  justify-content: center;
  margin-top: 5vw;
  width: 25vw;
  height: 30vw;
  position: relative;
}
@media (max-width: 700px) {
  .main {
    height: 35vw;
  }
}
@media (max-width: 600px) {
  .main {
    height: 50vw;
  }
}

.face {
  position: absolute;
}

.btns {
  display: flex;
  position: absolute;
  bottom: 0;
  z-index: 20000;
  transform: translateZ(20000px);
}

.btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  transition: .25s ease;
}
.btn:hover {
  border: 3px solid #00699D;
  transition: .25s ease;
}
.btn:nth-of-type(1) {
  background-color: #FFD297;
}
.btn:nth-of-type(2) {
  background-color: #DC7945;
}
.btn:nth-of-type(3) {
  background-color: #FFFFFF;
}

.skills {
  position: absolute;
  right: -13vw;
}

.skill {
  position: relative;
  width: 10vw;
  margin-bottom: .5vw;
  padding-left: 1vw;
  line-height: 1.6;
  border-radius: .5vw;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.2);
}
.skill:nth-of-type(1) .skill-p {
  width: 90%;
}
.skill:nth-of-type(2) .skill-p {
  width: 95%;
}
.skill:nth-of-type(3) .skill-p {
  width: 35%;
}
.skill:nth-of-type(4) .skill-p {
  width: 85%;
}
.skill-p {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 82, 110, 0.8);
  z-index: -1;
  transition: .35s ease;
}

/***********************/
.dog {
  position: relative;
  width: 11vw;
  height: 20vw;
  transform: perspective(10000px) rotateX(62deg) rotateZ(-36deg) translateZ(-10vw);
  background-color: #141414;
  box-shadow: 1vw 1vw 0 #141414, -1vw -1vw 0 #141414, 1vw -1vw 0 #141414, -1vw 1vw 0 #141414;
  transition: .2s;
}

/***********************/
.body {
  width: 11vw;
  height: 10vw;
  transform: translateZ(7vw);
  animation: body 1s ease-in-out infinite alternate;
}
.body__front {
  width: 11vw;
  height: 8vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(12vw);
}
.body__back {
  width: 11vw;
  height: 8vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-11vw) translateY(-8vw);
}
.body__right {
  width: 20vw;
  height: 8vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(11vw) translateX(-20vw) translateY(-8vw);
}
.body__left {
  width: 20vw;
  height: 8vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-8vw);
}
.body__top {
  width: 11vw;
  height: 20vw;
  transform-origin: top left;
  transform: translateZ(8vw);
}
.body__bottom {
  width: 11vw;
  height: 20vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-11vw);
}
.body__front {
  background-color: var(--color-a1);
}
.body__front::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30%;
  height: 55%;
  width: 40%;
  background-color: #FFFFFF;
}
.body__back {
  background-color: var(--color-a4);
}
.body__right {
  background-color: var(--color-a1);
}
.body__left {
  background-color: var(--color-a2);
}
.body__top {
  background-color: var(--color-a4);
}
.body__bottom {
  background-color: var(--color-a4);
}

/***************/
.paws {
  width: 100%;
  height: 100%;
  position: absolute;
}

.paw-b {
  width: 3.5vw;
  height: 1.25vw;
}
.paw-b__front {
  width: 3.5vw;
  height: 7vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-4.5vw);
}
.paw-b__back {
  width: 3.5vw;
  height: 7vw;
  transform-origin: top left;
  trans.........完整代码请登录后点击上方下载按钮下载查看