三角机械

下载代码

html

css

分享到微信朋友圈

html

css

:root {
  --left: 0;
  --top: 0;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

CodePenOnly {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #ddd;
  font-size: 28px;
  font-family: georgia;
  display: none;
}
@media (width: 726px) and (height: 408px), (width: 741px) and (height: 417px) {
  CodePenOnly {
    display: block;
  }
}

Scene {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #111;
  -webkit-perspective: 500px;
          perspective: 500px;
}

Shape {
  width: 45vmin;
  height: 45vmin;
  position: relative;
  left: var(--left);
  top: var(--top);
}
Shape Side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 45vmin solid;
  border-right: 45vmin solid transparent;
  border-radius: 10px;
  box-shadow: 0 0 100px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
Shape Side:nth-child(0) {
  -webkit-animation: rotate-side-0 0.5s linear infinite, change-color 10s linear infinite;
          animation: rotate-side-0 0.5s linear infinite, change-color 10s linear infinite;
}
Shape Side:nth-child(1) {
  -webkit-animation: rotate-side-1 0.5s linear infinite, change-color 10s linear infinite;
          animation: rotate-side-1 0.5s linear infinite, change-color 10s linear infinite;
}
Shape Side:nth-child(2) {
  -webkit-animation: rotate-side-2 0.5s linear infinite, change-color 10s linear infinite;
          animation: rotate-side-2 0.5s linear infinite, change-color 10s linear infinite;
}
Shape Side:nth-child(3) {
  -webkit-animation: rotate-side-3 0.5s linear infinite, change-color 10s linear infinite;
          animation: rotate-side-3 0.5s linear infinite, change-color 10s linear infinite;
}
Shape Side:nth-child(4) {
  -webkit-animation: rotate-side-4 0.5s linear infinite, change-color 10s linear infinite;
          animation: rotate-side-4 0.5s linear infinite, change-color 10s linear infinite;
}
Shape Side:nth-child(5) {
  -webkit-animation: rotate-side-5 0.5s linear infinite, change-color 10s linear infinite;
          animation: rotate-side-5 0.5s linear infinite, change-color 10s linear infinite;
}
Shape Side:nth-child(6) {
  -webkit-animation: rotate-side-6 0.5s linear infinite, change-color 10s linear infinite;
          animation: rotate-side-6 0.5s linear infinite, change-color 10s linear infinite;
}
Shape Side:nth-child(7) {
  -webkit-animation: rotate-side-7 0.5s linear infinite, change-color 10s linear infinite;
          animation: rotate-side-7 0.5s linear infinite, change-color 10s linear infinite;
}
Shape Side:nth-child(8) {
  -webkit-animation: rotate-side-8 0.5s linear infinite, change-color 10s linear infinite;
          animation: rotate-side-8 0.5s linear infinite, change-color 10s linear infinite;
}

@-webkit-keyframes rotate-side-0 {
  from {
    -webkit-transform: scale(0.8, 1) rotateX(0deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(0deg) rotate(45deg);
  }
  to {
    -webkit-transform: scale(0.8, 1) rotateX(-45deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(-45deg) rotate(45deg);
  }
}

@keyframes rotate-side-0 {
  from {
    -webkit-transform: scale(0.8, 1) rotateX(0deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(0deg) rotate(45deg);
  }
  to {
    -webkit-transform: scale(0.8, 1) rotateX(-45deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(-45deg) rotate(45deg);
  }
}
@-webkit-keyframes rotate-side-1 {
  from {
    -webkit-transform: scale(0.8, 1) rotateX(45deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(45deg) rotate(45deg);
  }
  to {
    -webkit-transform: scale(0.8, 1) rotateX(0deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(0deg) rotate(45deg);
  }
}
@keyframes rotate-side-1 {
  from {
    -webkit-transform: scale(0.8, 1) rotateX(45deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(45deg) rotate(45deg);
  }
  to {
    -webkit-transform: scale(0.8, 1) rotateX(0deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(0deg) rotate(45deg);
  }
}
@-webkit-keyframes rotate-side-2 {
  from {
    -webkit-transform: scale(0.8, 1) rotateX(90deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(90deg) rotate(45deg);
  }
  to {
    -webkit-transform: scale(0.8, 1) rotateX(45deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(45deg) rotate(45deg);
  }
}
@keyframes rotate-side-2 {
  from {
    -webkit-transform: scale(0.8, 1) rotateX(90deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(90deg) rotate(45deg);
  }
  to {
    -webkit-transform: scale(0.8, 1) rotateX(45deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(45deg) rotate(45deg);
  }
}
@-webkit-keyframes rotate-side-3 {
  from {
    -webkit-transform: scale(0.8, 1) rotateX(135deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(135deg) rotate(45deg);
  }
  to {
    -webkit-transform: scale(0.8, 1) rotateX(90deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(90deg) rotate(45deg);
  }
}
@keyframes rotate-side-3 {
  from {
    -webkit-transform: scale(0.8, 1) rotateX(135deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(135deg) rotate(45deg);
  }
  to {
    -webkit-transform: scale(0.8, 1) rotateX(90deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(90deg) rotate(45deg);
  }
}
@-webkit-keyframes rotate-side-4 {
  from {
    -webkit-transform: scale(0.8, 1) rotateX(180deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(180deg) rotate(45deg);
  }
  to {
    -webkit-transform: scale(0.8, 1) rotateX(135deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(135deg) rotate(45deg);
  }
}
@keyframes rotate-side-4 {
  from {
    -webkit-transform: scale(0.8, 1) rotateX(180deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(180deg) rotate(45deg);
  }
  to {
    -webkit-transform: scale(0.8, 1) rotateX(135deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(135deg) rotate(45deg);
  }
}
@-webkit-keyframes rotate-side-5 {
  from {
    -webkit-transform: scale(0.8, 1) rotateX(225deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(225deg) rotate(45deg);
  }
  to {
    -webkit-transform: scale(0.8, 1) rotateX(180deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(180deg) rotate(45deg);
  }
}
@keyframes rotate-side-5 {
  from {
    -webkit-transform: scale(0.8, 1) rotateX(225deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(225deg) rotate(45deg);
  }
  to {
    -webkit-transform: scale(0.8, 1) rotateX(180deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(180deg) rotate(45deg);
  }
}
@-webkit-keyframes rotate-side-6 {
  from {
    -webkit-transform: scale(0.8, 1) rotateX(270deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(270deg) rotate(45deg);
  }
  to {
    -webkit-transform: scale(0.8, 1) rotateX(225deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(225deg) rotate(45deg);
  }
}
@keyframes rotate-side-6 {
  from {
    -webkit-transform: scale(0.8, 1) rotateX(270deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(270deg) rotate(45deg);
  }
  to {
    -webkit-transform: scale(0.8, 1) rotateX(225deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(225deg) rotate(45deg);
  }
}
@-webkit-keyframes rotate-side-7 {
  from {
    -webkit-transform: scale(0.8, 1) rotateX(315deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(315deg) rotate(45deg);
  }
  to {
    -webkit-transform: scale(0.8, 1) rotateX(270deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(270deg) rotate(45deg);
  }
}
@keyframes rotate-side-7 {
  from {
    -webkit-transform: scale(0.8, 1) rotateX(315deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(315deg) rotate(45deg);
  }
  to {
    -webkit-transform: scale(0.8, 1) rotateX(270deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(270deg) rotate(45deg);
  }
}
@-webkit-keyframes rotate-side-8 {
  from {
    -webkit-transform: scale(0.8, 1) rotateX(360deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(360deg) rotate(45deg);
  }
  to {
    -webkit-transform: scale(0.8, 1) rotateX(315deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(315deg) rotate(45deg);
  }
}
@keyframes rotate-side-8 {
  from {
    -webkit-transform: scale(0.8, 1) rotateX(360deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(360deg) rotate(45deg);
  }
  to {
    -webkit-transform: scale(0.8, 1) rotateX(315deg) rotate(45deg);
            transform: scale(0.8, 1) rotateX(315deg) rotate(45deg);
  }
}
@-webkit-keyframes change-color {
  from, 20% {
    color: rgba(0, 250, 154, 0.25);
  }
  20.1%, 40% {
    color: rgba(255, 192, 203, 0.25);
  }
  40.1%, 60% {
    color: rgba(0, 255, 255, 0.25);
  }
  60.1%, 80% {
    color: rgba(255, 215, 0, 0.25);
  }
  80.1%, to {
    color: rgba(220, 20, 60, 0.25);
  }
}
@keyframes change-color {
  from, 20% {
    color: rgba(0, 250, 154, 0.25);
  }
  20.1%, 40% {
    color: rgba(255, 192, 203, 0.25);
  }
  40.1%, 60% {
    color: rgba(0, 255, 255, 0.25);
  }
  60.1%, 80% {
    color: rgba(255, 215, 0, 0.25);
  }
  80.1%, to {
    color: rgba(220, 20, 60, 0.25);
  }
}

JavaScript

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