8款前端特效动画及源码分享

3D立体数字时钟滚动特效

基于Splitting制作的一款3D立体数字时钟滚动特效，创意感满满，可以下载使用。

预览获取
在这里插入图片描述
核心代码

  <div class="clock">

    <span class="cog hours tens" data-splitting>0123456789</span>
    <span class="cog hours" data-splitting>0123456789</span>
    <span class="colon">:</span>
    <span class="cog minutes tens" data-splitting>0123456789</span>
    <span class="cog minutes" data-splitting>0123456789</span>
    <span class="colon">:</span>
    <span class="cog seconds tens" data-splitting>0123456789</span>
    <span class="cog seconds" data-splitting>0123456789</span>

  </div>

米字格手写文字练习代码

基于Canvas实现的一款米字手写贴，你可以自由的书写你喜欢的文字，同时还支持清除等功能，让你在娱乐中提升自己。

预览获取

在这里插入图片描述
核心代码

<body>

	<!--利用canvas绘画简单田字格-->
	<canvas id="canvas"></canvas>

	<div id="coltroller">
		<div id="clear_btn" class="op_btn" onClick="clean()">清 除</div>
		<div class="clearfix"></div>
	</div>

	<script src="js/canvas.js"></script>
</body>

自定义球体加载特效

是一款可自定义的加载动画，可以通过控制项改变背景颜色、调节弹起的速度快慢、以及弹起的弧度大小等

预览获取

在这里插入图片描述
核心代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义球体加载特效</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <script src="js/three.min.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/dat.gui.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

3D旋转变换进度条动画

非常有个性的一款3D加载动画特效，由点与线的运动构成带有3D立体动画视觉效果,可适用于网页的加载动画。

预览获取

在这里插入图片描述
核心代码

<body>
  <div class="spinner">
    <div class="spin">
      <div class="branch"></div>
      <div class="branch"></div>
      <div class="branch"></div>
    </div>
  </div>
  <div class="spinner">
    <div class="spin">
      <div class="branch"></div>
      <div class="branch"></div>
      <div class="branch"></div>
    </div>
  </div>
  ... +14
 </body>

粒子流动爱心动画特效

基于Canvas实现的一款爱心粒子流动特效，极具观赏性。

预览获取

在这里插入图片描述
核心代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>粒子流动爱心形状动画特效</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src='js/blgjlm.js'></script>
    <script src="js/index.js"></script>
</body>
</html>

气泡浮动上升特效

气泡浮动上升特效是基于Css和Js制作的一款上升动画特效，实现不同大小多种颜色带透明度的泡泡向上浮动画面。

预览获取

在这里插入图片描述

核心代码

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>气泡浮动上升特效</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="bubbles">
  <div class="bubble"></div>
  <div class="bubble"></div>
  ... + 398
 </div>
 <script  src="js/script.js"></script>
</body>
</html>

鼠标移动圆点粒子跟随特效

观赏性非常强的一款HTML5 Canvas鼠标移动圆点粒子跟随动画特效，鼠标移动圆点粒子出现并跟随鼠标指针移动，不动时圆点粒子则渐渐消失。

预览获取

在这里插入图片描述
核心代码

<body>
    <h1>
        别害羞, 把鼠标挪过来!
    </h1>
    <canvas></canvas>
    <script>
        // 创建Canvas对象及设置宽高
        var canvas = document.querySelector('canvas');
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;
        c = canvas.getContext('2d');

        // 监听窗口大小变化
        window.addEventListener('resize', function () {
            canvas.height = window.innerHeight;
            canvas.width = window.innerWidth;

            initCanvas();
        })

        // 设置鼠标位置
        var mouse = {
            x: undefined,
            y: undefined
        }

        // 监听鼠标移动事件
        window.addEventListener('mousemove',
            function (event) {
                mouse.x = event.x;
                mouse.y = event.y;
                drawCircles();
            }
        )

        // 监听触摸事件
        window.addEventListener("touchmove",
            function (event) {
                let touch = event.touches[0];
                mouse.x = touch.clientX;
                mouse.y = touch.clientY;
                drawCircles();
            }
        )

        // 创建圆点对象
        function Circle(x, y, radius, vx, vy, rgb, opacity, birth, life) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.minRadius = radius;
            this.vx = vx;
            this.vy = vy;
            this.birth = birth;
            this.life = life;
            this.opacity = opacity;

            this.draw = function () {
                c.beginPath();
                c.arc(this.x, this.y, this.radius, Math.PI * 2, false);
                c.fillStyle = 'rgba(' + rgb + ',' + this.opacity + ')';
                c.fill();
            }

            this.update = function () {
                if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
                    this.vx = -this.vx;
                }

                if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
                    this.vy = -this.vy;
                }

                this.x += this.vx;
                this.y += this.vy;

                this.opacity = 1 - (((frame - this.birth) * 1) / this.life);

                if (frame > this.birth + this.life) {
                    for (let i = 0; i < circleArray.length; i++) {
                        if (this.birth == circleArray[i].birth && this.life == circleArray[i].life) {
                            circleArray.splice(i, 1);
                            break;
                        }
                    }
                } else {
                    this.draw();
                }
            }

        }

        // 创建圆点数组
        var circleArray = [];

        // 初始化圆点数组
        function initCanvas() {
            circleArray = [];
        }

        // 色块数组
        var colorArray = [
            '355,85,80',
            '9,80,100',
            '343,81,45'
        ]

        // 绘制圆点
        function drawCircles() {
            for (let i = 0; i < 6; i++) {
                let radius = Math.floor(Math.random() * 4) + 2;
                let vx = (Math.random() * 2) - 1;
                let vy = (Math.random() * 2) - 1;
                let spawnFrame = frame;
                let rgb = colorArray[Math.floor(Math.random() * colorArray.length)];
                let life = 100;
                circleArray.push(new Circle(mouse.x, mouse.y, radius, vx, vy, rgb, 1, spawnFrame, life));

            }
        }

        var frame = 0;

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            frame += 1;
            c.clearRect(0, 0, innerWidth, innerHeight);
            for (let i = 0; i < circleArray.length; i++) {
                circleArray[i].update();
            }

        }

        initCanvas();
        animate();

        // 模拟鼠标移动
        for (let i = 1; i < 110; i++) {
            (function (index) {
                setTimeout(function () {
                    mouse.x = 100 + i * 10;
                    mouse.y = 100;
                    drawCircles();
                }, i * 10);
            })(i);
        }
    </script>
</body>

文字放射性发光特效

基于Canvas实现的一款文字展示特效

预览获取

在这里插入图片描述
核心代码

<body>
  <canvas id="canvas"></canvas>
  <script>
    var txt = "你相信光吗";
    var txtH = 100;
    var font = "sans-serif";
    var bg = "#000";
    var rayColor1 = "#e0f7fa";
    var rayColor2 = "#18ffff";
    var fade = 1000;

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var cw = canvas.width = window.innerWidth;
    var ch = canvas.height = window.innerHeight;

    var w2 = cw / 2;
    var h2 = ch / 2;
    var pi = Math.PI;
    var pi2 = pi * .5;

    var txtCanvas = document.createElement("canvas");
    var txtCtx = txtCanvas.getContext("2d");
    txtCtx.font = txtH + "px " + font;
    txtCtx.textBaseline = "middle";
    var txtW = Math.floor(txtCtx.measureText(txt).width);
    txtCanvas.width = txtW;
    txtCanvas.height = txtH * 1.5;

    var gradient = ctx.createRadialGradient(w2, h2, 0, w2, h2, txtW);
    gradient.addColorStop(0, rayColor2);
    gradient.addColorStop(1, rayColor1);
    ctx.strokeStyle = gradient;

    txtCtx.fillStyle = gradient;
    txtCtx.font = txtH + "px " + font;
    txtCtx.textBaseline = "middle";
    txtCtx.fillText(txt, 0, txtH * .5);

    //dirty adjust for descends
    txtH *= 1.5;

    var bufferCanvas = document.createElement("canvas");
    bufferCanvas.width = txtW;
    bufferCanvas.height = txtH;
    var buffer = bufferCanvas.getContext("2d");

    //text start position
    var sx = (cw - txtW) * 0.5
    var sy = (ch - txtH) * 0.5

    generate data
    var rays = [];
    var txtData = txtCtx.getImageData(0, 0, txtW, txtH);
    for (var i = 0; i < txtData.data.length; i += 4) {
      var ii = i / 4;
      var row = Math.floor(ii / txtW)
      var col = ii % txtW
      var alpha = txtData.data[i + 3]
      if (alpha !== 0) {
        var c = "rgba("
        c += [txtData.data[i], txtData.data[i + 1], txtData.data[i + 2], alpha / 255]
        c += ")";
        rays.push(new Ray(Math.floor(ii / txtW), ii % txtW, c));
      }
    }

    var current = 1;
    //start animation
    tick();

    function tick() {
      ctx.clearRect(0, 0, cw, ch)
      ctx.drawImage(bufferCanvas, 0, 0, current, txtH, sx, sy, current, txtH)
      ctx.save()
      ctx.globalAlpha = .07;
      ctx.globalCompositeOperation = "lighter";
      if (drawRays(current)) {
        current++;
        current = Math.min(current, txtW)
        window.requestAnimationFrame(tick)
      } else {
        fadeOut()
      }
      ctx.restore()
    }

    function fadeOut() {
      ctx.clearRect(0, 0, cw, ch)
      ctx.globalAlpha *= .95;
      ctx.drawImage(bufferCanvas, 0, 0, current, txtH, sx, sy, current, txtH)
      if (ctx.globalAlpha > .01) {
        window.requestAnimationFrame(fadeOut)
      } else {
        window.setTimeout(restart, 500)
      }
    }
    function restart() {
      for (var i = 0; i < rays.length; i++) {
        rays[i].reset()
      }
      ctx.globalAlpha = 1
      buffer.clearRect(0, 0, txtW, txtH)
      current = 1;
      tick();
    }
    function drawRays(c) {
      var count = 0;
      ctx.beginPath()
      for (var i = 0; i < rays.length; i++) {
        var ray = rays[i];
        if (ray.col < c) {
          count += ray.draw()
        }
      }
      ctx.stroke()
      return count !== rays.length;
    }

    function filterRays(r) {
      return Boolean(r);
    }

    function Ray(row, col, f) {
      this.col = col;
      this.row = row;

      var xp = sx + col;
      var yp = sy + row;
      var fill = f;

      var ath = (txtH / 1.5)

      var a = pi2 * (this.row - ath * .5) / ath;
      if (a === 0) {
        a = (Math.random() - .5) * pi2;
      }
      var da = .02 * Math.sign(a);
      da += (Math.random() - .5) * .005;
      var l = 0;
      var dl = Math.random() * 2 + 2;

      var buffered = false;
      this.reset = function () {
        a = pi2 * (this.row - ath * .5) / ath;
        if (a === 0) {
          a = -pi2 * .5;
        }
        l = 0;
        buffered = false
      }
      this.draw = function () {
        if (l < 0) {
          if (!buffered) {
            buffer.fillStyle = fill;
            buffer.fillRect(this.col, this.row, 1, 1);
            buffered = true
          }
          return 1;
        } else {
          ctx.moveTo(xp, yp)
          ctx.lineTo(xp + Math.cos(a) * l, yp + Math.sin(a) * l);
          a += da;
          l += Math.cos(a) * dl;
          return 0;
        }
      }
    }
  </script>
</body>