纯CSS光盘动画

下载代码

html

css

分享到微信朋友圈

html

<div class="camera o-x">
  <div class="camera o-y">
    <div class="camera o-z">
      <div class="disc">
        <div class="disc_case">
          <div class="disc_case_cover">
            <div class="disc_case_cover_wall o-side o-top"></div>
            <div class="disc_case_cover_wall o-side o-right"></div>
            <div class="disc_case_cover_wall o-side o-bottom"></div>
            <div class="disc_case_cover_wall o-side o-left"></div>
            <div class="disc_case_cover_wall o-surface">hover me</div>
          </div>
          <div class="disc_case_base">
            <div class="disc_case_base_wall o-side o-top"></div>
            <div class="disc_case_base_wall o-side o-right"></div>
            <div class="disc_case_base_wall o-side o-bottom"></div>
            <div class="disc_case_base_wall o-side o-left"></div>
            <div class="disc_case_base_wall o-surface"></div>
          </div>
        </div>
        <div class="disc_body_container">
          <div class="disc_body"></div>
        </div>
      </div>
    </div>
  </div>
</div>

css

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(calc(var(--case-size) * -1));
}
.disc_case_base {
  top: 1px;
  left: 1px;
}
.disc_case_base_wall {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
}
.disc_case_base_wall.o-surface {
  width: calc(var(--case-size) - 2px);
  height: calc(var(--case-size) - 2px);
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.disc_case_base_wall.o-surface::before {
  content: '';
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 15px);
  width: 30px;
  height: 30px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
  border-radius: 100%;
  -webkit-transform: translateZ(calc(var(--case-depth) / -2));
          transform: translateZ(calc(var(--case-depth) / -2));
}
.disc_case_base_wall.o-surface::after {
  content: '';
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 15px);
  width: 30px;
  height: 30px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
  border-radius: 100%;
  -webkit-transform: translateZ(calc(var(--case-depth) / -3));
          transform: translateZ(calc(var(--case-depth) / -3));
}
.disc_case_base_wall.o-side {
  width: calc(var(--case-size) - 2px);
  height: calc(var(--case-depth) - 1px);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}
.disc_case_base_wall.o-top {
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
}
.disc_case_base_wall.o-right {
  -webkit-transform: rotateZ(90deg) rotateX(90deg) translateZ(calc(var(--case-size) - 2px));
          transform: rotateZ(90deg) rotateX(90deg) translateZ(calc(var(--case-size) - 2px));
}
.disc_case_base_wall.o-bottom {
  -webkit-transform: rotateZ(180deg) rotateX(90deg) translateZ(calc(var(--case-size) - 2px)) translateX(calc(calc(var(--case-size) - 2px) * -1));
          transform: rotateZ(180deg) rotateX(90deg) translateZ(calc(var(--case-size) - 2px)) translateX(calc(calc(var(--case-size) - 2px) * -1));
}
.disc_case_base_wall.o-left {
  -webkit-transform: rotateZ(270deg) rotateX(90deg) translateX(calc(calc(var(--case-size) - 2px) * -1));
          transform: rotateZ(270deg) rotateX(90deg) translateX(calc(calc(var(--case-size) - 2px) * -1));
}

@-webkit-keyframes rotateX {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
}

@keyframes rotateX {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
}
@-webkit-keyframes rotateY {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes rotateY {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@-webkit-keyframes rotateZ {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
@keyframes rotateZ {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg