CSS光盘旋转动画

下载代码

html

css

分享到微信朋友圈

html

css

body {
  margin: 1em;
  text-align: center;
  background-color: #1d1f20;
}

.disc {
  display: inline-block;
  width: 50vmin;
  height: 50vmin;
  margin: 1em;
  border-radius: 50%;
  -webkit-animation: spin 6s linear infinite;
          animation: spin 6s linear infinite;
}
@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}
@keyframes spin {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}
.disc:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.disc:nth-child(1) {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}
.disc:nth-child(2) {
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
}
.disc:nth-child(3) {
  -webkit-animation-delay: -3.6s;
          animation-delay: -3.6s;
}
.disc:nth-child(4) {
  -webkit-animation-delay: -4.8s;
          animation-delay: -4.8s;
}
.disc:nth-child(5) {
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
}

.record.black {
  background-color: #111;
  background-image: radial-gradient(circle, #eee 0, #eee 1.8%, rgba(17, 17, 17, 0.25) 0, rgba(17, 17, 17, 0.25) 24%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 100%), conic-gradient(rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 5%, rgba(255, 255, 255, 0.25) 8%, rgba(255, 255, 255, 0.25) 18%, rgba(255, 255, 255, 0.05) 24%, rgba(255, 255, 255, 0.05) 32%, rgba(255, 255, 255, 0.1) 34%, rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0.05) 46%, rgba(255, 255, 255, 0.05) 56%, rgba(255, 255, 255, 0.15) 64%, rgba(255, 255, 255, 0.15) 69%, rgba(255, 255, 255, 0.05) 72%, rgba(255, 255, 255, 0.05) 81%, rgba(255, 255, 255, 0.1) 84%, rgba(255, 255, 255, 0.1) 86%, rgba(255, 255, 255, 0.05) 90%, rgba(255, 255, 255, 0.05) 95%, rgba(255, 255, 255, 0.15) 98%, rgba(255, 255, 255, 0.15) 100%), radial-gradient(circle, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 29%, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 34.5%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 42.5%, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 48%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 48.25%, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 54.5%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 59%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 59.5%, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 68%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 100%);
}
.record.bronze {
  background-color: #9e501e;
  background-image: radial-gradient(circle, #eee 0, #eee 1.8%, rgba(17, 17, 17, 0.75) 0, rgba(17, 17, 17, 0.75) 24%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 100%), conic-gradient(rgba(255, 255, 255, 0.45) 0, rgba(255, 255, 255, 0.45) 5%, rgba(255, 255, 255, 0.75) 8%, rgba(255, 255, 255, 0.75) 18%, rgba(255, 255, 255, 0.15) 24%, rgba(255, 255, 255, 0.15) 32%, rgba(255, 255, 255, 0.3) 34%, rgba(255, 255, 255, 0.3) 42%, rgba(255, 255, 255, 0.15) 46%, rgba(255, 255, 255, 0.15) 56%, rgba(255, 255, 255, 0.45) 64%, rgba(255, 255, 255, 0.45) 69%, rgba(255, 255, 255, 0.15) 72%, rgba(255, 255, 255, 0.15) 81%, rgba(255, 255, 255, 0.3) 84%, rgba(255, 255, 255, 0.3) 86%, rgba(255, 255, 255, 0.15) 90%, rgba(255, 255, 255, 0.15) 95%, rgba(255, 255, 255, 0.45) 98%, rgba(255, 255, 255, 0.45) 100%), radial-gradient(circle, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 29%, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 34.5%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 42%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 42.5%, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 48%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 48.25%, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 54.5%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 59%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 59.5%, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 68%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 100%);
  background-blend-mode: overlay;
}
.record.silver {
  background-color: #888;
  background-image: radial-gradient(circle, #eee 0, #eee 1.8%, rgba(17, 17, 17, 0.5) 0, rgba(17, 17, 17, 0.5) 24%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 100%), conic-gradient(rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.3) 5%, rgba(255, 255, 255, 0.5) 8%, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0.1) 24%, rgba(255, 255, 255, 0.1) 32%, rgba(255, 255, 255, 0.2) 34%, rgba(255, 255, 255, 0.2) 42%, rgba(255, 255, 255, 0.1) 46%, rgba(255, 255, 255, 0.1) 56%, rgba(255, 255, 255, 0.3) 64%, rgba(255, 255, 255, 0.3) 69%, rgba(255, 255, 255, 0.1) 72%, rgba(255, 255, 255, 0.1) 81%, rgba(255, 255, 255, 0.2) 84%, rgba(255, 255, 255, 0.2) 86%, rgba(255, 255, 255, 0.1) 90%, rgba(255, 255, 255, 0.1) 95%, rgba(255, 255, 255, 0.3) 98%, rgba(255, 255, 255, 0.3) 100%), radial-gradient(circle, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 29%, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 34.5%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 42.5%, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 48%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 48.25%, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 54.5%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 59%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 59.5%, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 68%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 100%);
}
.record.gold {
  background-color: goldenrod;
  background-image: radial-gradient(circle, #eee 0, #eee 1.8%, rgba(17, 17, 17, 0.75) 0, rgba(17, 17, 17, 0.75) 24%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 100%), conic-gradient(rgba(255, 255, 255, 0.45) 0, rgba(255, 255, 255, 0.45) 5%, rgba(255, 255, 255, 0.75) 8%, rgba(255, 255, 255, 0.75) 18%, rgba(255, 255, 255, 0.15) 24%, rgba(255, 255, 255, 0.15) 32%, rgba(255, 255, 255, 0.3) 34%, rgba(255, 255, 255, 0.3) 42%, rgba(255, 255, 255, 0.15) 46%, rgba(255, 255, 255, 0.15) 56%, rgba(255, 255, 255, 0.45) 64%, rgba(255, 255, 255, 0.45) 69%, rgba(255, 255, 255, 0.15) 72%, rgba(255, 255, 255, 0.15) 81%, rgba(255, 255, 255, 0.3) 84%, rgba(255, 255, 255, 0.3) 86%, rgba(255, 255, 255, 0.15) 90%, rgba(255, 255, 255, 0.15) 95%, rgba(255, 255, 255, 0.45) 98%, rgba(255, 255, 255, 0.45) 100%), radial-gradient(circle, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 29%, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 34.5%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 42%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 42.5%, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 48%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 48.25%, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 54.5%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 59%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 59.5%, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 68%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 100%);
  background-blend-mode: overlay;
}

.cd {
  background-image: radial-gradient(circle, #eee 0, #eee 10%, rgba(17, 17, 17, 0.2) 0, rgba(17, 17, 17, 0.2) 11.5%, rgba(255, 255, 255, 0.25) 0, rgba(255, 255, 255, 0.25) 17%, rgba(17, 17, 17, 0.05) 0, rgba(17, 17, 17, 0.05) 17.5%, rgba(255, 255, 255, 0.25) 0, rgba(255, 255, 255, 0.25) 20%, rgba(17, 17, 17, 0.05) 0, rgba(17, 17, 17, 0.05) 20.5%, rgba(255, 255, 255, 0.25) 0, rgba(255, 255, 255, 0.25) 25%, rgba(17, 17, 17, 0.2) 0, rgba(17, 17, 17, 0.2) 30%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 69.5%, rgba(17, 17, 17, 0.15) 0, rgba(17, 17, 17, 0.2) 100%), conic-gradient(#ffffff, #f5e1f6, #ffefd1, #fefec5, #c8c8c8, #8a8a8a, #605859, #704864, #3b49ac, #31c8de, #6cd399, #d0d0d0, #fcfcfc, #ffffff, #ffffff, #eafae9, #a3ffef, #98bcea, #9997a4, #868686, #767676, #f0ed5b, #e2a3a7, #d4d4d4, #ffffff, #ffffff);
}

JavaScript

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