说明：

• 因图片（动图）上传有大小要求，录制的视频也不能直接传上来。 所以就把代码放上来，各位自己测试一下吧。能写的注释，我都写上了。
• js这块暂时是用jq做的，因为jq就是“写少，做多”嘛~
• 三界分为天地人，自己构思，设计，写代码。需要做的内容有：
  1. 三界总官网，内嵌天庭官网、大唐官网、地府官网的入口
  2. 三界各自的后台
  3. 地府生死簿
  4. 纯属个人兴趣。如有想一起做的，可以一起敲哦~
  5. 后续会边做边传。和大家一起分享。 （惊了，凌晨4点了。要赶紧睡觉了，明天还要上班~~）

文章内容： 三界传说第一部分–三界官网

项目结构（文件夹截图）

各文件代码（自上而下）

common.css

* {
    margin: 0;
    padding: 0;
}

index-door.css

/* 创建首页旋转动画 这里是用的css3新属性*/
@keyframes door {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg)
    }
}
/* 设定旋转门参数 */
#index-door {
    display: block;
    position: absolute;
    z-index: 3;
    top: 55vh;
    left: 38vw;
    width: 15.625vw;
    height: 15.625vw;
    /* 切换成vw vh形式的响应式布局 */
    /* top: 430px;
    left: 580px;
    width: 300px;
    height: 300px; */
    opacity: .4;//设定透明度，为了和背景图更贴合
    border-radius: 50%;//设计成圆形，转起来好看些
    animation-name: door;//启用动画
    animation-duration: 1s;//动画一个周期时间
    animation-iteration-count: infinite;//动画无限循环
    animation-timing-function: linear;//匀速旋转

}

#entry-door {
    position: absolute;
    top: 60.1vh;//设置成响应式，适配各种分辨率
    left: -78.75vw;
    /* top: 430px;
    left: -1512px; */
    z-index: 2;
}
#entry-door img {
    width: 20.8vw;//这里不要忘了，不然图片还是不能适配
}

texiao1.css

//这是一个粒子流体插件
body {
    background-color: #000000;
    margin: 0;
    overflow: hidden;
    
  }
  body section {
    display: block;
    background: url(../image/starsky.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    font-weight: 700;
    font-size: 0;
  }
  body section canvas {
    position: absolute;
    top: 20%;
    left: 25%;
    width: 50vw;
    height: 50vh;
    
  }

image文件夹（原图）

(传的原图，不用担心分辨率的问题）

index-door.js

// 创建jq入口
$(function() {
    // 首页旋转图 鼠标进入后 淡出效果
    $('#index-door').mouseenter(function() {
        $('#index-door').fadeOut(3500, entryMove())
        // 淡出效果结束后，调用函数
    })  
    // 让天地人三张图片滑动到中间
    function entryMove() {
        
        function entryMove123() {
        //这里用的jq自定义动画，很方便
            $('#entry-door').animate({
                left: '18.23vw'//图片运动的终点位置
            }, 6000/*图片运动到终点需要的时间*/, 'linear'/*匀速运动*/)
        }
        //这里要用一下定时器，在旋转图淡出后，再让图片运动到中间
        setTimeout(entryMove123, 1000)
    } 
    
})

jquery.min.js

这个直接可以去官网下载，我就不写了。记得放对文件夹。

texiao1.js

（就是那四个动感的粒子体大字）

var canvas = document.querySelector("#canvas"),
    ctx = canvas.getContext("2d"),
    link = document.createElement('link');
    particles = [],
    amount = 0,
    mouse = { x: -9999, y: -9999 },
    radius = 1,
    colors = [
      "rgba(252,248,254,0.85)", 
      "rgba(220,203,255,0.75)", 
      "rgba(154,112,124,0.85)", 
      "rgba(192,213,255,0.85)", 
      "rgba(244,223,254,0.75)"
    ],
    headline = document.querySelector("#headline"),
    ww = window.innerWidth,
    wh = window.innerHeight;
 
function Particle(x, y) {
 
  this.x = Math.random() * ww;
  this.y = Math.random() * wh;
  this.dest = { x: x, y: y };
  this.r = Math.random() * 2 * Math.PI;
  this.vx = (Math.random() - 0.5) * 25;
  this.vy = (Math.random() - 0.5) * 25;
  this.accX = 0;
  this.accY = 0;
  this.friction = Math.random() * 0.025 + 0.94;
  this.color = colors[Math.floor(Math.random() * 2.75)];
}
 
Particle.prototype.render = function() {
 
  this.accX = (this.dest.x - this.x) / 1000;
  this.accY = (this.dest.y - this.y) / 1000;
  this.vx += this.accX;
  this.vy += this.accY;
  this.vx *= this.friction;
  this.vy *= this.friction;
  this.x += this.vx;
  this.y += this.vy;
 
  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
  ctx.fill();
 
  var a = this.x - mouse.x;
  var b = this.y - mouse.y;
 
  var distance = Math.sqrt(a * a + b * b);
  if (distance < (radius * 75)) {
 
    this.accX = (this.x - mouse.x) / 100;
    this.accY = (this.y - mouse.y) / 100;
    this.vx += this.accX;
    this.vy += this.accY;
  }
}
 
function onMouseMove(e) {
 
  mouse.x = e.clientX;
  mouse.y = e.clientY;
  }
 
  function onTouchMove(e) {
 
  if (e.touches.length > 0) {
 
    mouse.x = e.touches[0].clientX;
    mouse.y = e.touches[0].clientY;
  }
}
 
function onTouchEnd(e) {
 
  mouse.x = -9999;
  mouse.y = -9999;
}
 
function initScene() {
 
  ww = canvas.width = window.innerWidth;
  wh = canvas.height = window.innerHeight;
 
  ctx.clearRect(0, 0, canvas.width, canvas.height);
 
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = 'https://fonts.googleapis.com/css?family=Abril+Fatface';
  document.getElementsByTagName('head')[0].appendChild(link);
 
  ctx.font = 'bold 26vw "Abril Fatface"';
  ctx.textAlign = "center";
  ctx.fillText(headline.innerHTML, ww / 2, wh / 1.6);
 
  var data = ctx.getImageData(0, 0, ww, wh).data;
 
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = "screen";
 
  particles = [];
  for (var i = 0; i < ww; i += Math.round(ww / 200)) {
    for (var j = 0; j < wh; j += Math.round(ww / 200)) {
      if (data[((i + j * ww) * 4) + 3] > 200) {
       
        particles.push(new Particle(i, j));
      }
    }
  }
  amount = particles.length;
}
 
function render(a) {
 
  requestAnimationFrame(render);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < amount; i++) {
 
    particles[i].render();
  }
}
 
headline.addEventListener("keyup", initScene);
window.addEventListener("resize", initScene);
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("touchmove", onTouchMove);
window.addEventListener("touchend", onTouchEnd);
initScene();
requestAnimationFrame(render);

upload文件夹里的图片（原图）

index-door.jpg

人间.gif

天庭.png

幽冥界.png

favicon.ico

传不了这种格式。。。

sanjieindex.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到三界神话！</title>
    <link rel="shortcut icon" href="../public/favicon.ico" />
    <link rel="stylesheet" href="../public/css/common.css" />
    <link rel="stylesheet" href="../public/css/texiao1.css" />
    <link rel="stylesheet" href="../public/css/index-door.css" />
    
    <!-- css和js引入分开，方便识别，不容易弄错 -->
    <script src="../public/js/jquery.min.js"></script> 
</head>
<body>
    <!-- 三界神话特效插件 -->
    <section id="ci-particles">
        <canvas id="canvas" ></canvas>
        <h1 id="headline">三界神话</h1>
      </section> 

      <!-- //三界 首页旋转图 -->
      <img src="../public/upload/index-door.png" alt="index-door" id="index-door" />

      <!-- 显示三界各个图片入口 -->
      <div id="entry-door">
        <a href="">
            <img src="../public/upload/天庭.png" alt="天庭" title="点击进入天庭官网" />
        </a>
        <a href="">
            <img src="../public/upload/人间.gif" alt="人间" title="点击进入大唐官网" />
        </a>
        <a href="">
            <img src="../public/upload/幽冥界.png" alt="幽冥界" title="点击进入地府官网" />
        </a>
      </div>

      <script src="../public/js/index-door.js"></script>
      <script src="../public/js/texiao1.js"></script>
      
</body>
</html>