节日快乐！

下载代码

html

css

分享到微信朋友圈

html

css

@import url("https://fonts.googleapis.com/css?family=Dancing+Script");

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  font-family: "Dancing Script", cursive;
  letter-spacing: 0;
  font-style: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: white;
  font-size: 72px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: linear-gradient(135deg, #fbe9e7 0%, #fff3e0 100%);
}

h1 {
  padding: 24px;
  margin: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%) translateZ(80px);
          transform: translateY(-50%) translateZ(80px);
}

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
}
.container {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: relative;
  background: white;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

* {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}

JavaScript

var canvas = document.querySelector("canvas");
var container = document.querySelector(".container");

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent) === false) {
  VanillaTilt.init(container, { speed: 2000 });
}

var imageSize = 60;
var lowest = void 0;

var resize = function resize() {
  var maxWidth = Math.floor((window.innerWidth - 56) / imageSize);
  var maxHeight = Math.floor((window.innerHeight - 56) / imageSize);

lowest = maxWidth < maxHeight ? maxWidth : maxHeight;
  if (lowest > 10) lowest = 10;

container.style.width = lowest * imageSize + "px";
  container.style.height = lowest * imageSize + "px";
  container.style.display = 'block';
  document.body.style.fontSize = lowest * imageSize / 10 + "px";
};

var uniforms = [{
    name: "uProgress",
    type: "float",
    value: 0.0
  }];

var fragmentShader = "\n    precision mediump float;\n\n    uniform sampler2D uSampler;\n\n    void main() {\n      gl_FragColor = texture2D(uSampler, gl_PointCoord);\n    }\n  ";

var onSetup = function onSetup(gl) {
    texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.bindTexture(gl.TEXTURE_2D, null);
  };

var onRepeat = function onRepeat(gl, program) {
    var uSampler = gl.getUniformLocation(program, "uSampler");
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.uniform1i(uSampler, 0);

if (uniforms[0].value > 1) {
      forward = false;
    } else if (uniforms[0].value < 0) {
      forward = true;
    }
    uniforms[0].value += forward ? step : -step;
  };

var options = {
    onSetup: onSetup,
    onRepeat: onRepeat,
    pixelRatio: pixelRatio
  };

starlings(canvas, geometry, multiplier, attributes, uniforms, vertexShader, fragmentShader, options);
};

var getRandom = function getRandom(value) {
  return Math.random() * value - value / 2;
};

var loadImage = function loadImage(callback) {
  var image = new Image();
  image.onload = function () {
    callback(image);
  };
  image.crossOrigin = "Anonymous";
  image.src = "//www.jq22.com/gxwj/" + (Math.random() > 0.1 ? 1 : 2) + ".png";
};

loadImage(initialize);

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