一、前因

接着来。

二、适合阅读的排版

地址:

在head中引用

<link rel="stylesheet" href=";>

在需要排版的节点中加入class=“typo"

三、跨平台的字体

地址：

jsdelivr中的链接没有用，只能下载后将fonts.css放入自己站点引用。记得改成自己的路径

<link rel="stylesheet" href="/css/icomoon.css" />

需要的字体中加入class=“font-kai”，可选值为：font-hei 、font-kai、font-song、font-fang-song。方法同上一条。

四、鼠标特效

特效这玩意可太多了，找了半天，要么收费，要么侵入太强，要么用的canvas，而我不太会，费了番功夫，没整好，选择换掉。

没成功的地址：，效果五我可太喜了。

最后找到这个简单粗暴、无感、开源的。好用记得给作者点亮星。

地址：

我用的是气泡效果，其他效果对应导入js即可。

js中加入下列代码就可以了

// start bubbleCUrsorfunction bubbleCursor(options) {  let hasWrapperEl = options && options.element  let element = hasWrapperEl || document.body  let width = window.innerWidth  let height = window.innerHeight  let cursor = { x: width / 2, y: width / 2 }  let particles = []  let canvas, context  let canvImages = []  function init(wrapperEl) {    canvas = document.createElement("canvas")    context = canvas.getContext("2d")    canvas.style.top = "0px"    canvas.style.left = "0px"    canvas.style.pointerEvents = "none"    if (hasWrapperEl) {      canvas.style.position = "absolute"      element.appendChild(canvas)      canvas.width = element.clientWidth      canvas.height = element.clientHeight    } else {      canvas.style.position = "fixed"      document.body.appendChild(canvas)      canvas.width = width      canvas.height = height    }    bindEvents()    loop()  }  // Bind events that are needed  function bindEvents() {    element.addEventListener("mousemove", onMouseMove)    element.addEventListener("touchmove", onTouchMove)    element.addEventListener("touchstart", onTouchMove)    window.addEventListener("resize", onWindowResize)  }  function onWindowResize(e) {    width = window.innerWidth    height = window.innerHeight    if (hasWrapperEl) {      canvas.width = element.clientWidth      canvas.height = element.clientHeight    } else {      canvas.width = width      canvas.height = height    }  }  function onTouchMove(e) {    if (e.touches.length > 0) {      for (let i = 0; i < e.touches.length; i++) {        addParticle(          e.touches[i].clientX,          e.touches[i].clientY,          canvImages[Math.floor(Math.random() * canvImages.length)]        )      }    }  }  function onMouseMove(e) {    if (hasWrapperEl) {      const boundingRect = element.getBoundingClientRect()      cursor.x = e.clientX - boundingRect.left      cursor.y = e.clientY - boundingRect.top    } else {      cursor.x = e.clientX      cursor.y = e.clientY    }    addParticle(cursor.x, cursor.y)  }  function addParticle(x, y, img) {    particles.push(new Particle(x, y, img))  }  function updateParticles() {    context.clearRect(0, 0, width, height)    // Update    for (let i = 0; i < particles.length; i++) {      particles[i].update(context)    }    // Remove dead particles    for (let i = particles.length - 1; i >= 0; i--) {      if (particles[i].lifeSpan < 0) {        particles.splice(i, 1)      }    }  }  function loop() {    updateParticles()    requestAnimationFrame(loop)  }  function Particle(x, y, canvasItem) {    const lifeSpan = Math.floor(Math.random() * 60 + 60)    this.initialLifeSpan = lifeSpan //    this.lifeSpan = lifeSpan //ms    this.velocity = {      x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 10),      y: -0.4 + Math.random() * -1,    }    this.position = { x: x, y: y }    this.canv = canvasItem    this.baseDimension = 4    this.update = function(context) {      this.position.x += this.velocity.x      this.position.y += this.velocity.y      this.velocity.x += ((Math.random() < 0.5 ? -1 : 1) * 2) / 75      this.velocity.y -= Math.random() / 600      this.lifeSpan--      const scale =        0.2 + (this.initialLifeSpan - this.lifeSpan) / this.initialLifeSpan      context.fillStyle = "#e6f1f7"      context.strokeStyle = "#3a92c5"      context.beginPath()      context.arc(        this.position.x - (this.baseDimension / 2) * scale,        this.position.y - this.baseDimension / 2,        this.baseDimension * scale,        0,        2 * Math.PI      )      context.stroke()      context.fill()      context.closePath()    }  }  init()}new bubbleCursor()// end bubbleCUrsor

效果：

五、总结

够了够了，今天先美到这。