2018年冬奥会

下载代码

html

css

分享到微信朋友圈

html

css

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
body {
  background-color: #0061cf;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}
.snow {
  -webkit-animation-name: move;
          animation-name: move;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  z-index: 1;
}
.snow:nth-of-type(1) {
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.snow:nth-of-type(2) {
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
.snow:nth-of-type(3) {
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.rings {
  position: relative;
  z-index: -1;
}
.ring {
  height: 50px;
  width: 50px;
  border-width: 5px;
  border-radius: 100%;
  border-style: solid;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
}
@media (min-width: 768px) {
  .ring {
    height: 100px;
    width: 100px;
    border-width: 10px;
    margin-left: -50px;
    margin-top: -50px;
  }
}
.ring--red {
  border-color: #eb3350;
  -webkit-transform: translateX(110%) rotate(90deg);
          transform: translateX(110%) rotate(90deg);
}
.ring--green {
  border-color: #1f8b3d;
  -webkit-transform: translate(55%, 45%) rotate(180deg);
          transform: translate(55%, 45%) rotate(180deg);
  z-index: 2;
}
.ring--black {
  border-color: #000;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.ring--blue {
  border-color: #1587c1;
  -webkit-transform: translateX(-110%);
          transform: translateX(-110%);
}
.ring--yellow {
  border-color: #fab23f;
  -webkit-transform: translate(-55%, 45%);
          transform: translate(-55%, 45%);
  z-index: 1;
}
.ring-segment {
  border-bottom-color: transparent;
  z-index: 3;
}
@-webkit-keyframes move {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 100vh;
  }
}
@keyframes move {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 100vh;
  }
}

JavaScript

var generateCanvasImageUrl = function generateCanvasImageUrl() {
  var _window = window,
      innerHeight = _window.innerHeight,
      innerWidth = _window.innerWidth;

var pixels = innerHeight / 1 * (innerWidth / 1);
  var $canvas = document.createElement('canvas');
  var context = $canvas.getContext('2d');
  $canvas.height = innerHeight / 1;
  $canvas.width = innerWidth / 1;
  for (var pixel = 0; pixel < pixels; pixel++) {
    var x = pixel % innerWidth;
    var y = Math.floor(pixel / innerWidth);
    var size = Math.floor(Math.random() * 3 + 1);
    context.fillStyle = '#fff';
    if (Math.random() > 0.9999) context.fillRect(x, y, size, size);
  }
  return $canvas.toDataURL();
};

var $snowSlides = document.querySelectorAll('.snow');
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
  for (var _iterator = $snowSlides[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
    var $slide = _step.value;
    $slide.style.background = 'url(' + generateCanvasImageUrl() + ')';
  }
} catch (err) {
  _didIteratorError = true;
  _iteratorError = err;
} finally {
  try {
    if (!_iteratorNormalCompletion && _iterator.return) {
      _iterator.return();
    }
  } finally {
    if (_didIteratorError) {
      throw _iteratorError;
    }
  }
}

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