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 descendstxtH *= 1.5;var bufferCanvas = document.createElement("canvas");bufferCanvas.width = txtW;bufferCanvas.height = txtH;var buffer = bufferCanvas.getContext("2d");//text start positionvar sx = (cw - txtW) * 0.5var sy = (ch - txtH) * 0.5generate datavar 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 % txtWvar 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 animationtick();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 = 1buffer.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>