鼠标悬停切换表情动画特效
基于CSS的transform属性制作鼠标悬停切换表情动画特效,默认为笑脸表情,鼠标悬停上去切换爱心眼睛色眯眯的表情。
核心代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标悬停切换表情动画特效</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>鼠标悬停查看演示</h1>
<div class="head">
<div class="left-eye">
<div id="heart-1" class="heart"></div>
</div>
<div class="right-eye">
<div id="heart-2" class="heart"></div>
</div>
<div class="mouth"></div>
</div>
</body>
</html>
3D蜡烛烛光动画特效
基于three.js制作的3D蜡烛烛光动画特效,支持鼠标拖动旋转视角查看多方位特效。
核心代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D蜡烛烛光动画特效</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/OrbitControls.js"></script>
<script type="text/javascript">
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
});
}
</script>
<div id="info"
style="position: absolute;width:62px; height: 62px; top: 5px; left: 5px; overflow: hidden; margin:0; padding: 0">
<div id="circle" class="noselect">i</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
3D海洋粒子波浪动画特效
基于canvas制作的3D海洋粒子波浪特效,波浪粒子无限延伸非常逼真酷炫。
核心代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D海洋粒子波浪动画特效</title>
<style>
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div></div>
<script>
// 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 < vertexCount; i++) {
let x = i % oceanWidth
let y = 0
let z = i / oceanWidth >> 0
let offset = oceanWidth / 2
vertices.push([(-offset + x) * gridSize, y * gridSize, z * gridSize])
}
loop()
</script>
</body>
</html>
看见流星先许个愿
基于canvas实现的流星雨星星动画特效,除了有流星的滑落还有一闪一闪的亮星星以及十五的月亮,美轮美奂的。
核心代码
<script>
var context;
var arr = new Array();
var starCount = 800;
var rains = new Array();
var rainCount = 20;
//初始化画布及context
function init() {
//获取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 < 0.5) {
this.color = "#333";
} else {
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 < starCount; i++) {
var star = new Star();
star.init();
star.draw();
arr.push(star);
}
//画流星
for (var i = 0; i < rainCount; i++) {
var rain = new MeteorRain();
rain.init();
rain.draw();
rains.push(rain);
}
drawMoon();//绘制月亮
playStars();//绘制闪动的星星
playRains();//绘制流星
}
//星星闪起来
function playStars() {
for (var n = 0; n < starCount; n++) {
arr[n].getColor();
arr[n].draw();
}
setTimeout("playStars()", 100);
}
...
</script>
仿苹果手机桌面文件夹特效
仿苹果手机桌面文件夹特效是一款纯CSS绘制的iPhone界面,点击文件夹可浮动展开显示,点击空白处可以收起。效果很流畅,桌面打开文件夹效果一样。
核心代码
<div class="screen">
<input type="radio" id="_p0" name="pg" checked="checked">
<input type="radio" id="_p1" name="pg">
<div class="status">
<div class="carrier">No Service</div>
<div class="clock">12:00 AM</div>
<div class="battery">
<div class="battery-meter">
<div class="battery-meter-inner"></div>
</div>
</div>
</div>
<div class="pages">
<div class="page">
<div class="app">
<div class="app-icon"></div>
<div class="app-name">王者荣耀</div>
</div>
<div class="app">
<div class="app-icon"></div>
<div class="app-name">QQ</div>
</div>
<div class="app">
<div class="app-icon"></div>
<div class="app-name">微信</div>
</div>
<div class="app">
<div class="app-icon"></div>
<div class="app-name">网易云</div>
</div>
<div class="app">
<div class="app-icon"></div>
<div class="app-name">高德</div>
</div>
<div class="app">
<div class="app-icon"></div>
<div class="app-name">百度</div>
</div>
<div class="folder">
<div class="folder-apps" tabindex="0">
<div class="app">
<div class="app-icon"></div>
<div class="app-name">支付宝</div>
</div>
<div class="app">
<div class="app-icon"></div>
<div class="app-name">中国银行</div>
</div>
<div class="app">
<div class="app-icon"></div>
<div class="app-name">招商银行</div>
</div>
</div>
<div class="bg-blur"></div>
<div class="folder-name">理财</div>
</div>
<div class="folder">
<div class="folder-apps" tabindex="0">
<div class="app">
<div class="app-icon"></div>
<div class="app-name">语音备忘录</div>
</div>
<div class="app">
<div class="app-icon"></div>
<div class="app-name">指南针</div>
</div>
<div class="app">
<div class="app-icon"></div>
<div class="app-name">测距仪</div>
</div>
<div class="app">
<div class="app-icon"></div>
<div class="app-name">放大镜</div>
</div>
<div class="app">
<div class="app-icon"></div>
<div class="app-name">计算器</div>
</div>
<div class="app">
<div class="app-icon"></div>
<div class="app-name">时钟</div>
</div>
</div>
<div class="bg-blur"></div>
<div class="folder-name">实用工具</div>
</div>
<div class="pagination">
<label for="_p0"><span></span></label>
<label for="_p1"><span></span></label>
</div>
</div>
纸飞机跟随鼠标飞行动画特效
一款娱乐性很强的canvas纸飞机跟随鼠标飞行动画特效,鼠标指针指向哪边飞机就会朝哪个方向飞去,简直有趣又好玩。
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>纸飞机跟随鼠标飞行动画特效</title>
<link rel="stylesheet" type="text/css" href="fly.css">
<script type="text/javascript" src="js/paper-full.min.js"></script>
</head>
<body>
<canvas id="triangle-lost-in-space" resize="true"></canvas>
<script type="text/javascript" src="js/fly.js"></script>
<style>
canvas {
width: 100%;
height: 100%
}
</style>
</body>
</html>
敲击乐器特效
基于HTML5+SVG制作的模拟打击乐器动画特效,点击相应的乐器时会发出相应的乐器音效,非常具有娱乐性。
核心代码
<!-- Audio -->
<audio id="can1-Audio">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/can1.mp3" preload="auto"
type="audio/mp3" />
</audio>
<audio id="can2-Audio">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/can2.mp3" preload="auto"
type="audio/mp3" />
</audio>
<audio id="can3-Audio">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/can3.mp3" preload="auto"
type="audio/mp3" />
</audio>
<audio id="bucket1-Audio">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/bucket1.mp3" preload="auto"
type="audio/mp3" />
</audio>
<audio id="bucket2-Audio">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/bucket2.mp3" preload="auto"
type="audio/mp3" />
</audio>
<audio id="bucket3-Audio">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/bucket3.mp3" preload="auto"
type="audio/mp3" />
</audio>
<audio id="pot1-Audio">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/pot1.mp3" preload="auto"
type="audio/mp3" />
</audio>
<audio id="pot2-Audio">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/pot2.mp3" preload="auto"
type="audio/mp3" />
</audio>
<audio id="cup1-Audio">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/cup2.mp3" preload="auto"
type="audio/mp3" />
</audio>
<audio id="cup2-Audio">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/cup1.mp3" preload="auto"
type="audio/mp3" />
</audio>
<audio id="lid1-Audio">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/lid1.mp3" preload="auto"
type="audio/mp3" />
</audio>