纯css实现3d 打开光盘盒子动画特效-html代码-BFW代码库

代码语言：html

所属分类：三维

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

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

<title> Only CSS: Compact Disc &quot;Hover Me&quot;</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'>
<style>
      body {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: 'Anton', sans-serif;
  justify-content: center;
  align-items: center;
  -webkit-perspective: 600px;
          perspective: 600px;
}

:root {
  --case-size: 200px;
  --case-depth: 20px;
  --disc-color-r: 30;
  --disc-color-g: 150;
  --disc-color-b: 140;
}

div {
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.camera.o-x {
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
}
.camera.o-y {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-animation: rotateY 20s linear infinite;
          animation: rotateY 20s linear infinite;
}
.camera.o-z {
  -webkit-transform: rotateZ(-135deg);
          transform: rotateZ(-135deg);
}

.disc {
  top: calc(var(--case-size) / -2);
  left: calc(var(--case-size) / -2);
  transition: 1s;
}
.disc:hover {
  -webkit-transform: rotateX(-60deg);
          transform: rotateX(-60deg);
}
.disc:hover .disc_case_cover {
  -webkit-transform: rotateX(120deg);
          transform: rotateX(120deg);
}
.disc:hover .disc_body_container {
  transition-delay: 0.4s;
  -webkit-transform: translateZ(calc(var(--case-size) / 1.3)) rotateX(60deg) rotateY(-20deg);
          transform: translateZ(calc(var(--case-size) / 1.3)) rotateX(60deg) rotateY(-20deg);
}
.disc_body {
  top: 15px;
  left: 15px;
  width: calc(var(--case-size) - 30px);
  height: calc(var(--case-size) - 30px);
  background: radial-gradient(circle at center, rgba(var(--disc-color-r), var(--disc-color-g), var(--disc-color-b), 0) 0, rgba(var(--disc-color-r), var(--disc-color-g), var(--disc-color-b), 0) 15px, rgba(var(--disc-color-r), var(--disc-color-g), var(--disc-color-b), 1) 16px, rgba(var(--disc-color-r), var(--disc-color-g), var(--disc-color-b), 1) var(--case-size));
  border-radius: 100%;
}
.disc_body_container {
  transition: 0.8s;
  -webkit-transform-origin: calc(var(--case-size) / 2) calc(var(--case-size) / 2);
          transform-origin: calc(var(--case-size) / 2) calc(var(--case-size) / 2);
  -webkit-transform: translateZ(calc(var(--case-depth) / 2));
          transform: translateZ(calc(var(--case-depth) / 2));
}
.disc_body::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(calc(var(--disc-color-r) / 2), calc(var(--disc-color-g) / 2), calc(var(--disc-color-b) / 2), 0) 0, rgba(calc(var(--disc-color-r) / 2), calc(var(--disc-color-g) / 2), calc(var(--disc-color-b) / 2), 0) 15px, rgba(calc(var(--disc-color-r) / 2), calc(var(--disc-color-g) / 2), calc(var(--disc-color-b) / 2), 1) 16px, rgba(calc(var(--disc-color-r) / 2), calc(var(--disc-color-g) / 2), calc(var(--disc-color-b) / 2), 1) var(--case-size));
  border-radius: 100%;
  -webkit-transform: translateZ(-1px);
          transform: translateZ(-1px);
}
.disc_case_cover {
  transition: 1s;
}
.disc_case_cover_wall {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
}
.disc_case_cover_wall.o-surface {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--case-size);
  height: var(--case-size);
  -webkit-transform: translateZ(var(--case-depth)) rotateZ(90deg);
          transform: translateZ(var(--case-depth)) rotateZ(90deg);
  font-size: 2rem;
  color: rgba(var(--disc-color-r), var(--disc-color-g), var(--disc-color-b), 1);
}
.disc_case_cover_wall.o-side {
  width: var(--case-size);
  height: var(--case-depth);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}
.disc_case_cover_wall.o-top {
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
}
.disc_case_cover_wall.o-right {
  -webkit-transform: rotateZ(90deg) rotateX(90deg) translateZ(var(--case-size));
          transform: rotateZ(90deg) rotateX(90deg) translateZ(var(--case-size));
}
.disc_case_cover_wall.o-bottom {
  -webkit-transform: rotateZ(180deg) rotateX(90deg) translateZ(var(--case-size)) translateX(calc(var(--case-size) * -1));
          transform: rotateZ(180deg) rotateX(90deg) translateZ(var(--case-size)) translateX(calc(var(--case-size) * -1));
}
.disc_case_cover_wall.o-left {
  -webkit-transform: rotateZ(270deg) rotateX(90deg) translateX(calc(var(--case-size) * -1));
          transform: rotateZ(270deg) rotateX(90deg) translateX(cal.........完整代码请登录后点击上方下载按钮下载查看