|
鼠标悬停切换表情动画特效
基于CSS的transform属性制作鼠标悬停切换表情动画特效，默认为笑脸表情，鼠标悬停上去切换爱心眼睛色眯眯的表情。
预览获取
核心代码
DOCTYPE html>
鼠标悬停切换表情动画特效
鼠标悬停查看演示
3D蜡烛烛光动画特效
基于three.js制作的3D蜡烛烛光动画特效，支持鼠标拖动旋转视角查看多方位特效。
预览获取
 核心代码
DOCTYPE html>
3D蜡烛烛光动画特效
function getFlameMaterial(isFrontSide) {
let side = isFrontSide ? THREE.FrontSide : THREE.BackSide;
return new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 }
},
vertexShader: `
uniform float time;
varying vec2 vUv;
varying float hValue;
// 2D Random
float random (in vec2 st) {
return fract(sin(dot(st.xy,
vec2(12.9898,78.233)))
* 43758.5453123);
}
float noise (in vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
// Four corners in 2D of a tile
float a = random(i);
float b = random(i + vec2(1.0, 0.0));
float c = random(i + vec2(0.0, 1.0));
float d = random(i + vec2(1.0, 1.0));
// Smooth Interpolation
// Cubic Hermine Curve. Same as SmoothStep()
vec2 u = f*f*(3.0-2.0*f);
// u = smoothstep(0.,1.,f);
// Mix 4 coorners percentages
return mix(a, b, u.x) +
(c - a)* u.y * (1.0 - u.x) +
(d - b) * u.x * u.y;
}
void main() {
vUv = uv;
vec3 pos = position;
pos *= vec3(0.8, 2, 0.725);
hValue = position.y;
//float sinT = sin(time * 2.) * 0.5 + 0.5;
float posXZlen = length(position.xz);
pos.y *= 1. + (cos((posXZlen + 0.25) * 3.1415926) * 0.25 + noise(vec2(0, time)) * 0.125 + noise(vec2(position.x + time, position.z + time)) * 0.5) * position.y; // flame height
pos.x += noise(vec2(time * 2., (position.y - time) * 4.0)) * hValue * 0.0312; // flame trembling
pos.z += noise(vec2((position.y - time) * 4.0, time * 2.)) * hValue * 0.0312; // flame trembling
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);
}
`,
fragmentShader: `
varying float hValue;
varying vec2 vUv;
vec3 heatmapGradient(float t) {
return clamp((pow(t, 1.5) * 0.8 + 0.2) * vec3(smoothstep(0.0, 0.35, t) + t * 0.5, smoothstep(0.5, 1.0, t), max(1.0 - t * 1.7, t * 7.0 - 6.0)), 0.0, 1.0);
}
void main() {
float v = abs(smoothstep(0.0, 0.4, hValue) - 1.);
float alpha = (1. - v) * 0.99; // bottom transparency
alpha -= 1. - smoothstep(1.0, 0.97, hValue); // tip transparency
gl_FragColor = vec4(heatmapGradient(smoothstep(0.0, 0.3, hValue)) * vec3(0.95,0.95,0.4), alpha) ;
gl_FragColor.rgb = mix(vec3(0,0,1), gl_FragColor.rgb, smoothstep(0.0, 0.3, hValue)); // blueish for bottom
gl_FragColor.rgb += vec3(1, 0.9, 0.5) * (1.25 - vUv.y); // make the midst brighter
gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.66, 0.32, 0.03), smoothstep(0.95, 1., hValue)); // tip
}
`,
transparent: true,
side: side
});
}
i
3D海洋粒子波浪动画特效
基于canvas制作的3D海洋粒子波浪特效，波浪粒子无限延伸非常逼真酷炫。
预览获取
 核心代码
doctype html>
3D海洋粒子波浪动画特效
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
// Init Context
let c = document.createElement('canvas').getContext('2d')
let postctx = document.body.appendChild(document.createElement('canvas')).getContext('2d')
let canvas = c.canvas
let vertices = []
// Effect Properties
let vertexCount = 7000
let vertexSize = 3
let oceanWidth = 204
let oceanHeight = -80
let gridSize = 32;
let waveSize = 16;
let perspective = 100;
// Common variables
let depth = (vertexCount / oceanWidth * gridSize)
let frame = 0
let { sin, cos, tan, PI } = Math
// Generating dots
for (let i = 0; i
//获取canvas
var stars = document.getElementById("stars");
windowWidth = window.innerWidth; //当前的窗口的高度
stars.width = windowWidth;
stars.height = window.innerHeight;
//获取context
context = stars.getContext("2d");
}
//创建一个星星对象
var Star = function () {
this.x = windowWidth * Math.random();//横坐标
this.y = 5000 * Math.random();//纵坐标
this.text = ".";//文本
this.color = "white";//颜色
//产生随机颜色
this.getColor = function () {
var _r = Math.random();
if (_r
this.color = "white";
}
}
//初始化
this.init = function () {
this.getColor();
}
//绘制
this.draw = function () {
context.fillStyle = this.color;
context.fillText(this.text, this.x, this.y);
}
}
//画月亮
function drawMoon() {
var moon = new Image();
moon.onload = function () {
context.drawImage(moon, -5, -10);
}
moon.src = "images/moon.jpg"
}
//页面加载的时候
window.onload = function () {
init();
//画星星
for (var i = 0; i
var rain = new MeteorRain();
rain.init();
rain.draw();
rains.push(rain);
}
drawMoon();//绘制月亮
playStars();//绘制闪动的星星
playRains();//绘制流星
}
//星星闪起来
function playStars() {
for (var n = 0; n
width: 100%;
height: 100%
}
敲击乐器特效
基于HTML5+SVG制作的模拟打击乐器动画特效，点击相应的乐器时会发出相应的乐器音效，非常具有娱乐性。
预览获取
 核心代码
|