8款前端特效动画及源码分享
3D立体数字时钟滚动特效
基于Splitting制作的一款3D立体数字时钟滚动特效，创意感满满，可以下载使用。
预览获取
核心代码
<div class="clock">
<span class="cog hours tens" data-splitting>0123456789span>
<span class="cog hours" data-splitting>0123456789span>
<span class="colon">:span>
<span class="cog minutes tens" data-splitting>0123456789span>
<span class="cog minutes" data-splitting>0123456789span>
<span class="colon">:span>
<span class="cog seconds tens" data-splitting>0123456789span>
<span class="cog seconds" data-splitting>0123456789span>
div>
米字格手写文字练习代码
基于Canvas实现的一款米字手写贴，你可以自由的书写你喜欢的文字，同时还支持清除等功能，让你在娱乐中提升自己。
预览获取
核心代码
<body>
<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>