纯css布局实现一个三维木状狗狗效果

代码语言: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;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-3.5vw) translateY(-7vw);
}
.paw-b__right {
  width: 2.5vw;
  height: 7vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(3.5vw) translateX(-2.5vw) translateY(-7vw);
}
.paw-b__left {
  width: 2.5vw;
  height: 7vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-7vw);
}
.paw-b__top {
  width: 3.5vw;
  height: 2.5vw;
  transform-origin: top left;
  transform: translateZ(7vw);
}
.paw-b__bottom {
  width: 3.5vw;
  height: 2.5vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-3.5vw);
}
.paw-b:nth-of-type(1) {
  top: 1vw;
  left: 0;
}
.paw-b:nth-of-type(2) {
  top: 1vw;
  right: 0;
}
.paw-b:nth-of-type(3) {
  top: calc(100% - 4.5vw);
  left: 0;
}
.paw-b:nth-of-type(4) {
  top: calc(100% - 4.5vw);
  right: 0;
}
.paw-b__front {
  background-color: var(--color-a1);
}
.paw-b__back {
  background-color: var(--color-a4);
}
.paw-b__right {
  background-color: var(--color-a1);
}
.paw-b__left {
  background-color: var(--color-a2);
}
.paw-b__top {
  background-color: var(--color-a4);
}
.paw-b__bottom {
  background-color: var(--color-a4);
}

/***************/
.paw-f {
  width: 3.5vw;
  height: 1vw;
}
.paw-f__front {
  width: 3.5vw;
  height: 2.5vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-0.5vw);
}
.paw-f__back {
  width: 3.5vw;
  height: 2.5vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-3.5vw) translateY(-2.5vw);
}
.paw-f__right {
  width: 2vw;
  height: 2.5vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(3.5vw) translateX(-2vw) translateY(-2.5vw);
}
.paw-f__left {
  width: 2vw;
  height: 2.5vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-2.5vw);
}
.paw-f__top {
  width: 3.5vw;
  height: 2vw;
  transform-origin: top left;
  transform: translateZ(2.5vw);
}
.paw-f__bottom {
  width: 3.5vw;
  height: 2vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-3.5vw);
}
.paw-f:nth-of-type(1) {
  top: 3.5vw;
  left: 0;
}
.paw-f:nth-of-type(2) {
  top: 3.5vw;
  right: 0;
}
.paw-f:nth-of-type(3) {
  top: calc(100% - 2vw);
  left: 0;
}
.paw-f:nth-of-type(4) {
  top: calc(100% - 2vw);
  right: 0;
}
.paw-f__front {
  background-color: #FFFFFF;
}
.paw-f__back {
  background-color: #D9D9D9;
}
.paw-f__right {
  background-color: #FFFFFF;
}
.paw-f__left {
  background-color: #E2E2E2;
}
.paw-f__top {
  background-color: #D9D9D9;
}
.paw-f__bottom {
  background-color: #D9D9D9;
}

/***************/
.tail {
  width: 3.5vw;
  height: 0.8vw;
  top: calc(0% - 0.8vw);
  left: calc(50% - 1.75vw);
  animation: tail .125s ease infinite alternate;
}
.tail__front {
  width: 3.5vw;
  height: 2.5vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-0.9vw);
}
.tail__back {
  width: 3.5vw;
  height: 2.5vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-3.5vw) translateY(-2.5vw);
}
.tail__right {
  width: 1.6vw;
  height: 2.5vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(3.5vw) translateX(-1.6vw) translateY(-2.5vw);
}
.tail__left {
  width: 1.6vw;
  height: 2.5vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-2.5vw);
}
.tail__top {
  width: 3.5vw;
  height: 1.6vw;
  transform-origin: top left;
  transform: translateZ(2.5vw);
}
.tail__bottom {
  width: 3.5vw;
  height: 1.6vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-3.5vw);
}
.tail__front {
  background-color: var(--color-a1);
}
.tail__back {
  background-color: var(--color-a4);
}
.tail__right {
  background-color: var(--color-a1);
}
.tail__left {
  background-color: var(--color-a2);
}
.tail__top {
  background-color: var(--color-a4);
}
.tail__bottom {
  background-color: var(--color-a4);
}

/***************/
.neck {
  width: 5vw;
  height: 1.75vw;
  bottom: 3vw;
  left: calc(50% - 2.5vw);
}
.neck__front {
  width: 5vw;
  height: 4vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-0.5vw);
}
.neck__back {
  width: 5vw;
  height: 4vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-5vw) translateY(-4vw);
}
.neck__right {
  width: 3.5vw;
  height: 4vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(5vw) translateX(-3.5vw) translateY(-4vw);
}
.neck__left {
  width: 3.5vw;
  height: 4vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-4vw);
}
.neck__top {
  width: 5vw;
  height: 3.5vw;
  transform-origin: top left;
  transform: translateZ(4vw);
}
.neck__bottom {
  width: 5vw;
  height: 3.5vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-5vw);
}
.neck__front {
  background-color: var(--color-a2);
  border-bottom: 1vw solid #00699D;
}
.neck__back {
  background-color: var(--color-a4);
  border-bottom: 1vw solid #00699D;
}
.neck__right {
  background-color: var(--color-a1);
  border-bottom: 1vw solid #00699D;
}
.neck__left {
  background-color: var(--color-a3);
  border-bottom: 1vw solid #00526E;
}
.neck__top {
  background-color: var(--color-a4);
}
.neck__bottom {
  background-color: var(--color-a4);
}

/***************/
.head {
  width: 11vw;
  height: 3vw;
  bottom: 3vw;
  left: calc(50% - 5.5vw);
  animation: head 8s ease infinite;
}
.head__front {
  width: 11vw;
  height: 9vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-3vw);
}
.head__back {
  width: 11vw;
  height: 9vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-11vw) translateY(-9vw);
}
.head__right {
  width: 6vw;
  height: 9vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(11vw) translateX(-6vw) translateY(-9vw);
}
.head__left {
  width: 6vw;
  height: 9vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-9vw);
}
.head__top {
  width: 11vw;
  height: 6vw;
  transform-origin: top left;
  transform: translateZ(9vw);
}
.head__bottom {
  width: 11vw;
  height: 6vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-11vw);
}
.head__front {
  background-color: var(--color-a1);
}
.head__back {
  background-color: var(--color-a4);
}
.head__right {
  background-color: var(--color-a1);
}
.head__left {
  background-color: var(--color-a3);
}
.head__top {
  background-color: var(--color-a2);
}
.head__bottom {
  background-color: var(--color-a4);
}

.eyes {
  width: 100%;
  padding: 1.25vw 2.1vw;
  display: flex;
  justify-content: space-between;
}

.eye {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.75vw;
  height: 1.75vw;
  border-radius: 50%;
  background-color: #1F1F1D;
  animation: eye 8s infinite;
}
.eye::before {
  content: '';
  position: absolute;
  width: 35%;
  height: 35%;
  border-radius: 50%;
  background-color: #FFFFFF;
}

.ears {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
}

.ear {
  width: 4vw;
  height: 1vw;
}
.ear__front {
  width: 4vw;
  height: 3vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-1vw);
}
.ear__back {
  width: 4vw;
  height: 3vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-4vw) translateY(-3vw);
}
.ear__right {
  width: 2vw;
  height: 3vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(4vw) translateX(-2vw) translateY(-3vw);
}
.ear__left {
  width: 2vw;
  height: 3vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-3vw);
}
.ear__top {
  width: 4vw;
  height: 2vw;
  transform-origin: top left;
  transform: translateZ(3vw);
}
.ear__bottom {
  width: 4vw;
  height: 2vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-4vw);
}
.ear:nth-of-type(1) {
  left: calc(0% - 2vw );
  transform-origin: bottom right;
  animation: ear-l 1s ease infinite;
}
.ear:nth-of-type(2) {
  right: calc(0% - 2vw );
  transform-origin: bottom left;
  animation: ear-r 2s ease infinite;
}
.ear__front {
  background-color: var(--color-a1);
}
.ear__back {
  background-color: var(--color-a3);
}
.ear__right {
  background-color: var(--color-a1);
}
.ear__left {
  background-color: var(--color-a3);
}
.ear__top {
  background-color: var(--color-a2);
}
.ear__bottom {
  background-color: var(--color-a4);
}

/***************/
.snout {
  width: 4vw;
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0