数字时钟

下载代码

html

css

分享到微信朋友圈

html

css

@import url("https://fonts.googleapis.com/css?family=Old+Standard+TT");
body {
  font-family: 'Old Standard TT', serif;
  background-color: #1f1f1f;
  color: rgba(255, 255, 255, 0.1);
  margin: 0;
  font-size: 24px;
  overflow: hidden;
}
body > div {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  white-space: nowrap;
}
body > div > div {
  display: inline-flex;
  flex-direction: column-reverse;
}
body > div > div:not(:last-child) {
  margin-right: 1em;
}
body > div > div:nth-child(3n - 1) {
  margin-right: 2em;
  position: relative;
}
body > div > div:nth-child(3n - 1):after {
  content: ':';
  font-size: 2em;
  color: white;
  position: absolute;
  right: -0.675em;
  bottom: -0.2em;
}
body > div > div > div {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  transition: color 350ms ease-out, -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, color 350ms ease-out;
  transition: transform 200ms ease-in-out, color 350ms ease-out, -webkit-transform 200ms ease-in-out;
}
body > div > div > div.highlight {
  -webkit-transform: rotate(0deg) scale(2);
          transform: rotate(0deg) scale(2);
  color: white;
}
body > div > div > div.highlight ~ div {
  -webkit-transform: rotate(-90deg) translate3D(0.4em, 0, 0);
          transform: rotate(-90deg) translate3D(0.4em, 0, 0);
}

JavaScript

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