时间代码

下载代码

html

css

分享到微信朋友圈

html

css

:root {
  --color-grey: #2a2a21;
  --color-yellow: #edce4c;
  --color-bright-yellow: #ffe45e;
  --color-mustard: #dbbd3b;
}

body,
html {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(to bottom left, var(--color-bright-yellow), var(--color-mustard));
}

.timer {
  box-shadow: 10px 10px 60px rgba(27, 27, 27, 0.9);
  display: grid;
  -webkit-column-gap: 1px;
          column-gap: 1px;
  row-gap: 1px;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(5, 100px);
}

.block {
  height: 100px;
  position: relative;
  transition: 400ms -webkit-transform ease;
  transition: 400ms transform ease;
  transition: 400ms transform ease, 400ms -webkit-transform ease;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 100px;
}
.block > div {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3) inset, 0 0 30px rgba(0, 0, 0, 0.3) inset;
  position: absolute;
  width: 100%;
  height: 100%;
}
.block .front,
.block .back {
  background-color: var(--color-bright-yellow);
}
.block .top,
.block .bottom {
  background-color: var(--color-grey);
}
.block .front {
  -webkit-transform: rotateY(0deg) translateZ(50px);
          transform: rotateY(0deg) translateZ(50px);
}
.block .top {
  -webkit-transform: rotateX(90deg) translateZ(50px);
          transform: rotateX(90deg) translateZ(50px);
}
.block .back {
  -webkit-transform: rotateY(180deg) translateZ(50px);
          transform: rotateY(180deg) translateZ(50px);
}
.block .bottom {
  -webkit-transform: rotateX(-90deg) translateZ(50px);
          transform: rotateX(-90deg) translateZ(50px);
}

.show-front {
  -webkit-transform: translateZ(-100px) rotateX(0deg);
          transform: translateZ(-100px) rotateX(0deg);
}

.show-top {
  -webkit-transform: translateZ(-100px) rotateX(-90deg);
          transform: translateZ(-100px) rotateX(-90deg);
}

.show-back {
  -webkit-transform: translateZ(-100px) rotateX(-180deg);
          transform: translateZ(-100px) rotateX(-180deg);
}

.show-bottom {
  -webkit-transform: translateZ(-100px) rotateX(-270deg);
          transform: translateZ(-100px) rotateX(-270deg);
}

JavaScript

var timerEl = document.querySelector('.timer');
var blocksEl = timerEl.querySelectorAll('.block');
var zero = [0, 1, 2, 3, 5, 6, 8, 9, 11, 12, 13, 14];
var one = [1, 4, 7, 10, 13];
var two = [0, 1, 2, 5, 6, 7, 8, 9, 12, 13, 14];
var three = [0, 1, 2, 5, 6, 7, 8, 11, 12, 13, 14];
var four = [0, 2, 3, 5, 6, 7, 8, 11, 14];
var five = [0, 1, 2, 3, 6, 7, 8, 11, 12, 13, 14];
var six = [0, 3, 6, 7, 8, 9, 11, 12, 13, 14];
var seven = [0, 1, 2, 5, 8, 11, 14];
var eight = [0, 1, 2, 3, 5, 6, 7, 8, 9, 11, 12, 13, 14];
var nine = [0, 1, 2, 3, 5, 6, 7, 8, 11, 14];
var s = 0;

var rotate = function rotate(el) {
    var rotation = el.dataset.rotate;
    var deg = rotation;

if (s === 0) {
        deg = -90;
    } else {
        deg = deg - 90;
    }
    el.style.transform = 'translateZ(-100px) rotateX(' + deg + 'deg)';
    el.dataset.rotate = deg;
};

doRotateCurrent.forEach(function (block) {
            rotate(blocksEl[block]);
        });
        doRotatePrev.forEach(function (block) {
            rotate(blocksEl[block]);
        });
    } else {
        number.forEach(function (block) {
            rotate(blocksEl[block]);
        });
    }
};

s += 1;
    }, 1000);
};

timer();

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