简约大气的粒子发射特效404模板源码-QQ沐编程

源码介绍

这是一款简约大气的404页面模板源码，具有粒子从右向左发射特效代码，js里面可以设置发送文字内容，默认是4和0，如果像发射其他的内容可以进行修改，中间白色的数字404表示这个页面的作用，三色背景显得简约大气，源码为HTML单页源码，可以将下面的代码拷贝到404.html空白文件里面报错，然后双击鼠标即可查看效果，或者放到服务器里面设置好重定向，做自己的网站错误页面也是不错的，喜欢的同学拿去使用吧

效果截图

图片[1]-简约大气的粒子发射特效404模板源码-QQ沐编程

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>404 Particles with PixiJS</title>
		<style>@import url("https://fonts.googleapis.com/css?family=Roboto");
* {
  box-sizing: border-box;
}
body {
  font-family: 'Roboto', sans-serif;
  min-height: 100vh;
  background: linear-gradient(35deg, #a1eeeb 30%, #4331ec 85%);
  background: linear-gradient(35deg, #f8d60f 20%, #fc5c5c 85%);
  background: linear-gradient(65deg, #fbdc14 20%, #04c4d4 20%, #04c4d4 65%, #fc5c5c 65%, #fc5c5c 85%);
}
canvas {
  height: 30vh;
  left: 0;
  position: absolute;
  top: 0;
  width: 100vw;
}
canvas {
  top: 50%;
  transform: translate(0, -50%);
}
.content {
  align-items: center;
  color: #fafafa;
  display: flex;
  height: 100vh;
  width: 100vw;
  position: absolute;
  justify-content: center;
  z-index: 2;
}
.content h1 {
  font-size: 4rem;
  text-shadow: 10px 10px 5px rgba(0,0,0,0.5);
}
@media (min-width: 768px) {
  .content h1 {
    font-size: 10rem;
  }
}
</style>
	</head>
	<!--QQ沐编程 www.qqmu.com 学习QQ群：290987565  域名抢注 https://www.juming.com/t/33210x2a49c4 -->
	<body>	
		<canvas></canvas>
		<div class="content">
		  <h1>404</h1>
		</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js"></script>
		<script>const {
  PIXI: {
    Application,
    particles: { ParticleContainer },
    Sprite } } =

window;
let FONT_SIZE = innerHeight / 10;
const FRACTION = 0.3;
const PARTICLE_CONTAINER_OPTS = {
  scale: true,
  position: true,
  alpha: true };

const getHeight = () => Math.floor(innerHeight * FRACTION);
const view = document.querySelector('canvas');
const AMOUNT = 100;
const onTick = () => {
  if (
  App.renderer.width !== innerWidth ||
  App.renderer.height !== getHeight())
  {
    App.renderer.resize(innerWidth, getHeight());
    Fours.removeChildren();
    Ohhhs.removeChildren();
    Page.removeChildren();
    FONT_SIZE = innerHeight / 10;
    bootstrapLayers();
  }
  for (const p of [...Fours.children, ...Ohhhs.children, ...Page.children]) {
    p.x -= p.vx;
    if (p.x < -p.width) {
      p.x = p.startingX;
    }
  }
};

const App = new Application({
  antialias: true,
  height: getHeight(),
  transparent: true,
  view,
  width: innerWidth });


const createText = (text, opts = { height: FONT_SIZE * 2, width: FONT_SIZE * 2 }) => {
  const canvas = document.createElement('canvas');
  canvas.width = opts.width;
  canvas.height = opts.height;
  const context = canvas.getContext('2d');
  context.font = `${Math.floor(innerHeight / 10)}px Roboto`;
  context.fillStyle = '#ffffff';
  context.fillText(text, 0, FONT_SIZE, innerWidth);
  return canvas;
};

const addParticles = (amount, container, text) => {
  new Array(amount).fill().map(p => {
    p = new Sprite.from(text);
    p.vx = Math.random() * 10 + 1;
    p.x = p.startingX = innerWidth + (Math.floor(Math.random() * (innerWidth * 2 - text.width * 2)) + text.width * 2);
    p.y = Math.floor(Math.random() * (getHeight() - text.height / 2));
    p.scale.x = p.scale.y = (Math.random() * 50 + 50) / 100;
    p.alpha = Math.random() * 50 / 100;
    container.addChild(p);
  });
};

const bootstrapLayers = () => {
  addParticles(Math.floor(innerWidth / 10), Fours, createText('4'));
  addParticles(Math.floor(innerWidth / 10), Ohhhs, createText('0'));
  addParticles(Math.floor(innerWidth / 50), Page, createText('Page not found', { height: FONT_SIZE * 2, width: innerWidth }));
};

const Fours = new ParticleContainer(Math.floor(innerWidth / 10), PARTICLE_CONTAINER_OPTS);
const Ohhhs = new ParticleContainer(Math.floor(innerWidth / 10), PARTICLE_CONTAINER_OPTS);
const Page = new ParticleContainer(Math.floor(innerWidth / 50), PARTICLE_CONTAINER_OPTS);
bootstrapLayers();

App.stage.addChild(Fours);
App.stage.addChild(Ohhhs);
App.stage.addChild(Page);
App.ticker.add(onTick);</script>
	</body>
</html>

更多好看的404页面html源码可以搜索QQ沐编程，觉得有帮助的话可以CTRL+D收藏一下本站

本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。敬请谅解！

THE END