案例一
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>H5,200行代码实现粒子漩涡特效</title>
<style>
html,
body {
margin: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
}
#canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
function project3D(x, y, z, vars) {
var p, d;
x -= vars.camX;
y -= vars.camY - 8;
z -= vars.camZ;
p = Math.atan2(x, z);
d = Math.sqrt(x * x + z * z);
x = Math.sin(p - vars.yaw) * d;
z = Math.cos(p - vars.yaw) * d;
p = Math.atan2(y, z);
d = Math.sqrt(y * y + z * z);
y = Math.sin(p - vars.pitch) * d;
z = Math.cos(p - vars.pitch) * d;
var rx1 = -1000;
var ry1 = 1;
var rx2 = 1000;
var ry2 = 1;
var rx3 = 0;
var ry3 = 0;
var rx4 = x;
var ry4 = z;
var uc = (ry4 - ry3) * (rx2 - rx1) - (rx4 - rx3) * (ry2 - ry1);
var ua = ((rx4 - rx3) * (ry1 - ry3) - (ry4 - ry3) * (rx1 - rx3)) / uc;
var ub = ((rx2 - rx1) * (ry1 - ry3) - (ry2 - ry1) * (rx1 - rx3)) / uc;
if (!z) z = 0.000000001;
if (ua > 0 && ua < 1 && ub > 0 && ub < 1) {
return {
x: vars.cx + (rx1 + ua * (rx2 - rx1)) * vars.scale,
y: vars.cy + y / z * vars.scale,
d: (x * x + y * y + z * z)
};
} else {
return {
d: -1
};
}
}
function elevation(x, y, z) {
var dist = Math.sqrt(x * x + y * y + z * z);
if (dist && z / dist >= -1 && z / dist <= 1) return Math.acos(z / dist);
return 0.00000001;
}
function rgb(col) {
col += 0.000001;
var r = parseInt((0.5 + Math.sin(col) * 0.5) * 16);
var g = parseInt((0.5 + Math.cos(col) * 0.5) * 16);
var b = parseInt((0.5 - Math.sin(col) * 0.5) * 16);
return "#" + r.toString(16) + g.toString(16) + b.toString(16);
}
function interpolateColors(RGB1, RGB2, degree) {
var w2 = degree;
var w1 = 1 - w2;
return [w1 * RGB1[0] + w2 * RGB2[0], w1 * RGB1[1] + w2 * RGB2[1], w1 * RGB1[2] + w2 * RGB2[2]];
}
function rgbArray(col) {
col += 0.000001;
var r = parseInt((0.5 + Math.sin(col) * 0.5) * 256);
var g = parseInt((0.5 + Math.cos(col) * 0.5) * 256);
var b = parseInt((0.5 - Math.sin(col) * 0.5) * 256);
return [r, g, b];
}
function colorString(arr) {
var r = parseInt(arr[0]);
var g = parseInt(arr[1]);
var b = parseInt(arr[2]);
return "#" + ("0" + r.toString(16)).slice(-2) + ("0" + g.toString(16)).slice(-2) + ("0" + b.toString(16)).slice(-2);
}
function process(vars) {
if (vars.points.length < vars.initParticles)
for (var i = 0; i < 5; ++i) spawnParticle(vars);
var p, d, t;
p = Math.atan2(vars.camX, vars.camZ);
d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ);
d -= Math.sin(vars.frameNo / 80) / 25;
t = Math.cos(vars.frameNo / 300) / 165;
vars.camX = Math.sin(p + t) * d;
vars.camZ = Math.cos(p + t) * d;
vars.camY = -Math.sin(vars.frameNo / 220) * 15;
vars.yaw = Math.PI + p + t;
vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
var t;
for (var i = 0; i < vars.points.length; ++i) {
x = vars.points[i].x;
y = vars.points[i].y;
z = vars.points[i].z;
d = Math.sqrt(x * x + z * z) / 1.0075;
t = .1 / (1 + d * d / 5);
p = Math.atan2(x, z) + t;
vars.points[i].x = Math.sin(p) * d;
vars.points[i].z = Math.cos(p) * d;
vars.points[i].y += vars.points[i].vy * t * ((Math.sqrt(vars.distributionRadius) - d) * 2);
if (vars.points[i].y > vars.vortexHeight / 2 || d < .25) {
vars.points.splice(i, 1);
spawnParticle(vars);
}
}
}
function drawFloor(vars) {
var x, y, z, d, point, a;
for (var i = -25; i <= 25; i += 1) {
for (var j = -25; j <= 25; j += 1) {
x = i * 2;
z = j * 2;
y = vars.floor;
d = Math.sqrt(x * x + z * z);
point = project3D(x, y - d * d / 85, z, vars);
if (point.d != -1) {
size = 1 + 15000 / (1 + point.d);
a = 0.15 - Math.pow(d / 50, 4) * 0.15;
if (a > 0) {
vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(d / 26 - vars.frameNo / 40), [0, 128, 32], .5 +
Math.sin(d / 6 - vars.frameNo / 8) / 2));
vars.ctx.globalAlpha = a;
vars.ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);
}
}
}
}
vars.ctx.fillStyle = "#82f";
for (var i = -25; i <= 25; i += 1) {
for (var j = -25; j <= 25; j += 1) {
x = i * 2;
z = j * 2;
y = -vars.floor;
d = Math.sqrt(x * x + z * z);
point = project3D(x, y + d * d / 85, z, vars);
if (point.d != -1) {
size = 1 + 15000 / (1 + point.d);
a = 0.15 - Math.pow(d / 50, 4) * 0.15;
if (a > 0) {
vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(-d / 26 - vars.frameNo / 40), [32, 0, 128], .5 +
Math.sin(-d / 6 - vars.frameNo / 8) / 2));
vars.ctx.globalAlpha = a;
vars.ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);
}
}
}
}
}
function sortFunction(a, b) {
return b.dist - a.dist;
}
function draw(vars) {
vars.ctx.globalAlpha = .15;
vars.ctx.fillStyle = "#000";
vars.ctx.fillRect(0, 0, canvas.width, canvas.height);
drawFloor(vars);
var point, x, y, z, a;
for (var i = 0; i < vars.points.length; ++i) {
x = vars.points[i].x;
y = vars.points[i].y;
z = vars.points[i].z;
point = project3D(x, y, z, vars);
if (point.d != -1) {
vars.points[i].dist = point.d;
size = 1 + vars.points[i].radius / (1 + point.d);
d = Math.abs(vars.points[i].y);
a = .8 - Math.pow(d / (vars.vortexHeight / 2), 1000) * .8;
vars.ctx.globalAlpha = a >= 0 && a <= 1 ? a : 0;
vars.ctx.fillStyle = rgb(vars.points[i].color);
if (point.x > -1 && point.x < vars.canvas.width && point.y > -1 && point.y < vars.canvas.height) vars.ctx.fillRect(
point.x - size / 2, point.y - size / 2, size, size);
}
}
vars.points.sort(sortFunction);
}
function spawnParticle(vars) {
var p, ls;
pt = {};
p = Math.PI * 2 * Math.random();
ls = Math.sqrt(Math.random() * vars.distributionRadius);
pt.x = Math.sin(p) * ls;
pt.y = -vars.vortexHeight / 2;
pt.vy = vars.initV / 20 + Math.random() * vars.initV;
pt.z = Math.cos(p) * ls;
pt.radius = 200 + 800 * Math.random();
pt.color = pt.radius / 1000 + vars.frameNo / 250;
vars.points.push(pt);
}
function frame(vars) {
if (vars === undefined) {
var vars = {};
vars.canvas = document.querySelector("canvas");
vars.ctx = vars.canvas.getContext("2d");
vars.canvas.width = document.body.clientWidth;
vars.canvas.height = document.body.clientHeight;
window.addEventListener("resize", function() {
vars.canvas.width = document.body.clientWidth;
vars.canvas.height = document.body.clientHeight;
vars.cx = vars.canvas.width / 2;
vars.cy = vars.canvas.height / 2;
}, true);
vars.frameNo = 0;
vars.camX = 0;
vars.camY = 0;
vars.camZ = -14;
vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
vars.yaw = 0;
vars.cx = vars.canvas.width / 2;
vars.cy = vars.canvas.height / 2;
vars.bounding = 10;
vars.scale = 500;
vars.floor = 26.5;
vars.points = [];
vars.initParticles = 700;
vars.initV = .01;
vars.distributionRadius = 800;
vars.vortexHeight = 25;
}
vars.frameNo++;
requestAnimationFrame(function() {
frame(vars);
});
process(vars);
draw(vars);
}
frame();
</script>
</body>
</html>
案例二：（鼠标移动在图片上，图片放大）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.listbox {
width: 620px;
margin: 50px auto;
}
.listbox h3 {
font-size: 17;
}
.pic {
position: relative;
}
.pic img:nth-of-type(1) {
width: 370px;
height: 150px;
border: 4px solid #CECECE;
padding: 2px;
}
.pic img:nth-of-type(2) {
position: absolute;
width: 470px;
height: 250px;
top: 0px;
left: -30px;
display: none;
}
.pic:hover img:nth-of-type(2){
display: block;
}
</style>
</head>
<body>
<!-- 图片默认会向下撑大3像素，解决办法加display：block -->
<div class="listbox">
<div class="list">
<div class="pic">
<img src="image/juraj.png">
<img src="image/juraj.png">
</div>
</div>
</div>
</body>
</html>
案例三：旋转缩放动画特效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 200px;
height: 200px;
background: #f00;
border-radius: 50%;
margin: 0 auto
}
p {
width: 160px;
height: 160px;
background: url(image/juraj.png);
border-radius: 50%;
background-position: center;
border: 20px solid rgba(255, 255, 255, 0.5);
position: absolute;
z-index: 1;
transition: 1s;
}
h1 {
width: 200px;
height: 200px;
background: #333;
color: #fff;
text-align: center;
line-height: 200px;
border-radius: 50%;
position: absolute;
transform: scale(0,0) rotate(0deg);
transition: 1s;
}
div:hover p{transform: scale(0,0) rotate(360deg);}
div:hover h1{transform: scale(1,1) rotate(360deg);}
</style>
</head>
<body>
<div>
<p></p>
<h1>content</h1>
</div>
</body>
</html>
案例四：垂直手风琴
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.listbox {
width: 500px;
margin: 5px auto;
}
.listbox .list a {
display: block;
height: 35px;
background: linear-gradient(#cecece, #8f8f8f);
border-radius: 5px;
padding-left: 12px;
text-decoration: none;
color: #424242;
line-height: 35px;
}
.listbox .list p {
height: 0px;
overflow: auto;
padding-left: 10px;
margin: 5px 0;
transition: 0.7s;
}
.listbox .list {
position: relative;
}
.listbox .list span {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid white;
border-bottom: 5px solid transparent;
position: absolute;
top: 15px;
right: 15px;
}
.listbox .list:target p {
height: 100px;
}
.listbox .list a:hover,
.listbox .list:target a {
background: linear-gradient(#6bb2ff, #2288dd);
color: #fff;
}
.listbox .list:target span {
border-top: 5px solid transparent;
border-left: 5px solid white;
right: 10px;
}
/* 伪类 */
</style>
</head>
<body>
<div class="listbox">
<div class="list" id="listone">
<a href="#listone">Brand</a>
<span></span>
<p>意大利国家研究委员会极地科学研究所研究员比亚吉奥·迪·莫罗（Biagio Di Mauro）称，
近期观察意大利北部普勒塞纳冰川出现了粉红色的雪（西瓜雪），这可能是由雪衣藻（Chlamydomonas nivalis）造成的。
莫罗表示，这些藻类植物没有危险性，但可能会在春季和夏季造成造成冰川成为红色，当这些现象
频繁发生的时候，这可能将是危险的信号。由于今年的降雪减少和高气温促进了雪衣藻的生长，而过多的藻类植物将会加速冰川融化。</p>
</div>
<div class="list" id="listtwo">
<a href="#listtwo">Brand</a>
<span></span>
<p>意大利国家研究委员会极地科学研究所研究员比亚吉奥·迪·莫罗（Biagio Di Mauro）称，
近期观察意大利北部普勒塞纳冰川出现了粉红色的雪（西瓜雪），这可能是由雪衣藻（Chlamydomonas nivalis）造成的。
莫罗表示，这些藻类植物没有危险性，但可能会在春季和夏季造成造成冰川成为红色，当这些现象
频繁发生的时候，这可能将是危险的信号。由于今年的降雪减少和高气温促进了雪衣藻的生长，而过多的藻类植物将会加速冰川融化。</p>
</div>
<div class="list" id="listthree">
<a href="#listthree">Brand</a>
<span></span>
<p>意大利国家研究委员会极地科学研究所研究员比亚吉奥·迪·莫罗（Biagio Di Mauro）称，
近期观察意大利北部普勒塞纳冰川出现了粉红色的雪（西瓜雪），这可能是由雪衣藻（Chlamydomonas nivalis）造成的。
莫罗表示，这些藻类植物没有危险性，但可能会在春季和夏季造成造成冰川成为红色，当这些现象
频繁发生的时候，这可能将是危险的信号。由于今年的降雪减少和高气温促进了雪衣藻的生长，而过多的藻类植物将会加速冰川融化。</p>
</div>
</div>
</body>
</html>
案例五：折扇效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{padding: 0;margin: 0 auto;}
.box{position: relative; left: 400px; top: 140px;}
.box div{height: 230px;width: 59px;position: absolute;transform-origin: center bottom;transition: all 1s linear;}
.box div:nth-of-type(1){background:green;}
.box div:nth-of-type(2){background: blue;opacity: 0;}
.box div:nth-of-type(3){background: blueviolet;opacity: 0;}
.box div:nth-of-type(4){background: skyblue;opacity: 0;}
.box div:nth-of-type(5){background: brown;opacity: 0;}
.box div:nth-of-type(6){background: cyan;opacity: 0;}
.box div:nth-of-type(7){background: coral;opacity: 0;}
.box div:nth-of-type(8){background: red;opacity: 0;}
.box div:nth-of-type(9){background: blue;opacity: 0;}
.box div:nth-of-type(10){background: blueviolet;opacity: 0;}
.box div:nth-of-type(11){background: skyblue;opacity: 0;}
.box div:nth-of-type(12){background: brown;opacity: 0;}
.box div:nth-of-type(13){background: cyan;opacity: 0;}
.box div:nth-of-type(14){background: red;opacity: 0;}
.box:hover div:nth-of-type(2){transform: rotate(15deg);opacity: 1;}
.box:hover div:nth-of-type(3){transform: rotate(30deg);opacity: 1;}
.box:hover div:nth-of-type(4){transform: rotate(45deg);opacity: 1;}
.box:hover div:nth-of-type(5){transform: rotate(60deg);opacity: 1;}
.box:hover div:nth-of-type(6){transform: rotate(75deg);opacity: 1;}
.box:hover div:nth-of-type(7){transform: rotate(90deg);opacity: 1;}
.box:hover div:nth-of-type(8){transform: rotate(-90deg);opacity: 1;}
.box:hover div:nth-of-type(9){transform: rotate(-75deg);opacity: 1;}
.box:hover div:nth-of-type(10){transform: rotate(-60deg);opacity: 1;}
.box:hover div:nth-of-type(11){transform: rotate(-45deg);opacity: 1;}
.box:hover div:nth-of-type(12){transform: rotate(-30deg);opacity: 1;}
.box:hover div:nth-of-type(13){transform: rotate(-15deg);opacity: 1;}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>7</div>
<div>6</div>
<div>5</div>
<div>4</div>
<div>3</div>
<div>2</div>
<div>1</div>
</div>
</body>
</html>
云朵案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> </title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
background-color: #394276;
height: 31.25em;
width: 31.25em;
border-radius: 50%;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.cloud {
background-color: #f5f5f5;
height: 6.25em;
width: 20.62em;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 18.75em;
border-radius: 6.25em;
}
.cloud:before {
position: absolute;
content: "";
height: 10.62em;
width: 10.62em;
background-color: #f5f5f5;
border-radius: 50%;
bottom: 1.87em;
left: 2.5em;
}
.cloud:after {
position: absolute;
content: "";
height: 6.25em;
width: 6.25em;
background-color: #f5f5f5;
border-radius: 50%;
bottom: 3.75em;
right: 3.12em;
z-index: -1;
}
.moon {
background-color: #787470;
height: 9.37em;
width: 9.37em;
border-radius: 50%;
position: absolute;
right: 5em;
top: 11.25em;
overflow: hidden;
z-index: -2;
animation: spin-moon 5s infinite linear;
}
@keyframes spin-moon {
100% {
transform: rotate(360deg);
}
}
.moon:before {
position: absolute;
content: "";
height: 1.87em;
width: 1.87em;
background-color: #565350;
border-radius: 50%;
top: 1.87em;
box-shadow: 5.62em 3.12em 0 0.75em #565350, 2.18em 4.68em 0 -0.3em #565350, 6.25em -1.86em 0 -0.18em #565350;
}
.blush {
height: 2.62em;
width: 2.62em;
background-color: #c9c9c9;
border-radius: 50%;
position: absolute;
left: 5em;
box-shadow: 6.87em 0 #c9c9c9;
}
.eye-l,
.eye-r {
position: absolute;
height: 1.25em;
width: 2.12em;
background-color: #363636;
border-radius: 0 0 0.93em 0.93em;
}
.eye-l {
left: 6.87em;
}
.eye-r {
left: 11.25em;
}
.eye-l:after,
.eye-r:after {
position: absolute;
content: "";
background-color: #F5F5F5;
height: 0.81em;
width: 1.25em;
border-radius: 0 0.93em 0.93em;
left: 0.43em;
}
.mouth {
height: 1.25em;
width: 1.25em;
background-color: #363636;
border-radius: 50%;
position: absolute;
left: 9.86em;
top: 1.56em;
animation: snoore 3s infinite;
}
@keyframes snoore {
50% {
transform: scale(1.3);
}
}
.star {
position: absolute;
height: 0.31em;
width: 0.31em;
background-color: #f0d815;
border-radius: 50%;
}
.star:before {
position: absolute;
content: "";
background-color: rgba(240, 216, 21, 0.4);
height: 0.31em;
width: 0.31em;
border-radius: 50%;
animation: twinkle 2s infinite;
}
@keyframes twinkle {
50% {
transform: scale(2);
}
}
.star-1 {
left: 4.37em;
top: 6.25em
}
.star-2 {
left: 13.12em;
top: 28.12em
}
.star-3 {
left: 8.75em;
top: 10em
}
@media screen and (max-width:500px) {
.container {
font-size: 12px;
}
}
</style>
<body>
<div class="container">
<div class="moon"></div>
<div class="cloud">
<div class="blush"></div>
<div class="eye-l"></div>
<div class="eye-r"></div>
<div class="mouth"></div>
</div>
<div class="star star-1"></div>
<div class="star star-2"></div>
<div class="star star-3"></div>
</div>
</body>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
