前端好看特效---第二期
1. 新年快乐特效1
文件目录：
style.css
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #161929;
position: relative;
overflow: hidden;
user-select: none;
}
audio {
opacity: 0;
}
.message {
position: fixed;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
width: 160px;
background-color: rgba(0, 0, 0, 0.52);
padding: 0px 17px;
top: 25px;
border-radius: 6px;
overflow: hidden;
z-index: 1000;
opacity: 0;
}
/* 消息提示框内容样式 */
.message p {
line-height: 1;
font-size:14px;
color: #ffffff;
}
.spark {
width: 3px;
height: 3px;
border-radius: 50%;
position: absolute;
background-color: rgba(231, 200, 160, 0.8);
box-shadow: 0 0 40px 0 rgba(231, 200, 160, 0.8);
animation: glow 5s infinite;
}
.medium-spark {
width: 7px;
height: 7px;
}
.big-spark {
width: 10px;
height: 10px;
box-shadow: 0 0 40px 0 #e9c9a0, 0 0 20px 0 #FFFFFF, inset 0 0 4px #FFFFFF;
}
.meteor {
width: 6px;
height: 6px;
background-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 0 40px 0 #e9c9a0, 0 0 20px 0 #FFFFFF, inset 0 0 8px rgba(255, 255, 255, 0.6);
top: 0;
left: 80%;
opacity: 0.3;
transform: rotate(-45deg) translate(0, -50px);
animation: meteor 7s infinite;
}
.meteor:after {
content: '';
width: 20vw;
height: 6px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 20px rgba(231, 200, 160, 0.4);
position: absolute;
top: 0;
left: 0;
}
@keyframes glow {
0% {
opacity: 0.9;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0.9;
}
}
@keyframes meteor {
0% {
transform: rotate(-45deg) translateX(0);
opacity: 0.3;
}
10% {
opacity: 1;
}
20% {
transform: rotate(-45deg) translateX(-100vw);
opacity: 0;
}
100% {
transform: rotate(-45deg) translateX(-100vw);
opacity: 0;
}
}
main.js
// 初始化内容
var wH = window.innerHeight;
var wW = window.innerWidth;
let backgroundRendering = document.getElementById("backgroundRendering");
var generateStars = function generateStars(f) {
for (var e = 0; e < f; e++) {
var single = document.createElement("div");
single.className = e % 20 == 0 ? "spark big-spark" : e % 9 == 0 ? "spark medium-spark" : "star";
single.setAttribute("style", "top:" + Math.round(Math.random() * wH) + "px;left:" + Math.round(Math.random() * wW) + "px;animation-duration:" + (Math.round(Math.random() * 3000) + 3000) + "ms;animation-delay:" + Math.round(Math.random() * 3000) + "ms;");
backgroundRendering.appendChild(single);
}
};
generateStars(getRandom(140, 240));
// 全局变量 提供内容/对象存储
let fireworksCanvas = document.getElementById("fireworks");
let currentFireworks = document.createElement("canvas");
let currentObject = currentFireworks.getContext("2d");
let fireworksObject = fireworksCanvas.getContext("2d");
currentFireworks.width = fireworksCanvas.width = window.innerWidth;
currentFireworks.height = fireworksCanvas.height = window.innerHeight;
let fireworksExplosion = [];
let autoPlayFlag = false;
// 自动加载烟花动画
window.onload = function () {
drawFireworks();
lastTime = new Date();
animationEffect();
// 背景音乐
let audio = document.getElementById('bgm');
document.querySelector("body").onclick = function () {
if (!autoPlayFlag) {
audio.play();
autoPlayFlag = true;
}
}
for (let i = 0; i <= 10; i++) {
setTimeout(function () {
document.querySelector("body > div.message").style.opacity = i / 10;
}, i * 60 + 2000)
};
for (let i = 0; i <= 10; i++) {
setTimeout(function () {
document.querySelector("body > div.message").style.opacity = 1 - i / 10;
if (i == 10) {
document.querySelector("body > div.message > p").innerHTML = "点击屏幕可快速释放烟花"
}
}, i * 60 + 8000)
};
for (let i = 0; i <= 10; i++) {
setTimeout(function () {
document.querySelector("body > div.message").style.opacity = i / 10;
}, i * 60 + 8600)
};
for (let i = 0; i <= 10; i++) {
setTimeout(function () {
document.querySelector("body > div.message").style.opacity = 1 - i / 10;
}, i * 60 + 16600)
};
};
let lastTime;
// 烟花动画效果
function animationEffect() {
fireworksObject.save();
fireworksObject.fillStyle = "rgba(0,5,25,0.1)";
fireworksObject.fillRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);
fireworksObject.restore();
let newTime = new Date();
if (newTime - lastTime > getRandom(10, 1600) + (window.innerHeight - 767) / 2) {
let random = Math.random() * 100 > 15;
let x = getRandom(0, (fireworksCanvas.width));
let y = getRandom(0, 400);
if (random) {
let bigExplode = new explode(
getRandom(0, fireworksCanvas.width),
getRandom(1, 3),
"#FFF",
{
x: x,
y: y,
}
);
fireworksExplosion.push(bigExplode);
} else {
let x = getRandom(fireworksCanvas.width / 2 - 300, fireworksCanvas.width / 2 + 300);
let y = getRandom(0, 350);
let bigExplode = new explode(
getRandom(0, fireworksCanvas.width),
getRandom(1, 3),
"#FFF",
{
x: x,
y: y,
},
document.querySelectorAll(".shape")[
parseInt(getRandom(0, document.querySelectorAll(".shape").length))
]
);
fireworksExplosion.push(bigExplode);
}
lastTime = newTime;
}
sparks.foreach(function () {
this.paint();
});
fireworksExplosion.foreach(function () {
let that = this;
if (!this.dead) {
this._move();
this._drawLight();
} else {
this.explodes.foreach(function (index) {
if (!this.dead) {
this.moveTo();
} else {
if (index === that.explodes.length - 1) {
fireworksExplosion[fireworksExplosion.indexOf(that)] = null;
}
}
});
}
});
setTimeout(animationEffect, 16);
}
Array.prototype.foreach = function (callback) {
for (let i = 0; i < this.length; i++) {
if (this[i] !== null) {
callback.apply(this[i], [i]);
}
}
};
fireworksCanvas.onclick = function (evt) {
let x = evt.clientX;
let y = evt.clientY;
let explode1 = new explode(
getRandom(fireworksCanvas.width / 3, (fireworksCanvas.width * 2) / 3),
2,
"#FFF",
{
x: x,
y: y,
}
);
fireworksExplosion.push(explode1);
};
let explode = function (x, r, c, explodeArea, shape) {
this.explodes = [];
this.x = x;
this.y = fireworksCanvas.height + r;
this.r = r;
this.c = c;
this.shape = shape || false;
this.explodeArea = explodeArea;
this.dead = false;
this.ba = parseInt(getRandom(80, 200));
};
explode.prototype = {
_paint: function () {
fireworksObject.save();
fireworksObject.beginPath();
fireworksObject.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
fireworksObject.fillStyle = this.c;
fireworksObject.fill();
fireworksObject.restore();
},
_move: function () {
let dx = this.explodeArea.x - this.x,
dy = this.explodeArea.y - this.y;
this.x = this.x + dx * 0.01;
this.y = this.y + dy * 0.01;
if (Math.abs(dx) <= this.ba && Math.abs(dy) <= this.ba) {
if (this.shape) {
this._shapeExplode();
} else {
this._explode();
}
this.dead = true;
} else {
this._paint();
}
},
_drawLight: function () {
fireworksObject.save();
fireworksObject.fillStyle = "rgba(255,228,150,0.3)";
fireworksObject.beginPath();
fireworksObject.arc(this.x, this.y, this.r + 3 * Math.random() + 1, 0, 2 * Math.PI);
fireworksObject.fill();
fireworksObject.restore();
},
_explode: function () {
let embellishmentNum = getRandom(30, 200);
let style = getRandom(0, 10) >= 5 ? 1 : 2;
let color;
if (style === 1) {
color = {
a: parseInt(getRandom(128, 255)),
b: parseInt(getRandom(128, 255)),
c: parseInt(getRandom(128, 255)),
};
}
let fullRange = parseInt(getRandom(300, 400));
for (let i = 0; i < embellishmentNum; i++) {
if (style === 2) {
color = {
a: parseInt(getRandom(128, 255)),
b: parseInt(getRandom(128, 255)),
c: parseInt(getRandom(128, 255)),
};
}
let a = getRandom(-Math.PI, Math.PI);
let x = getRandom(0, fullRange) * Math.cos(a) + this.x;
let y = getRandom(0, fullRange) * Math.sin(a) + this.y;
let radius = getRandom(0, 2);
let embellishment = new newEmbellishment(this.x, this.y, radius, color, x, y);
this.explodes.push(embellishment);
}
},
_shapeExplode: function () {
let that = this;
putValue(currentFireworks, currentObject, this.shape, 5, function (dots) {
let dx = fireworksCanvas.width / 2 - that.x;
let dy = fireworksCanvas.height / 2 - that.y;
let color;
for (let i = 0; i < dots.length; i++) {
color = {
a: dots[i].a,
b: dots[i].b,
c: dots[i].c,
};
let x = dots[i].x;
let y = dots[i].y;
let radius = 1;
let embellishment = new newEmbellishment(that.x, that.y, radius, color, x - dx, y - dy);
that.explodes.push(embellishment);
}
});
},
};
function putValue(fireworks, context, ele, dr, callback) {
context.clearRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);
let img = new Image();
let dots;
if (ele.innerHTML.indexOf("img") >= 0) {
img.src = ele.getElementsByTagName("img")[0].src;
implode(img, function () {
context.drawImage(
img,
fireworksCanvas.width / 2 - img.width / 2,
fireworksCanvas.height / 2 - img.width / 2
);
let dots = gettingData(fireworks, context, dr);
callback(dots);
});
} else {
let text = ele.innerHTML;
context.save();
let fontSize = getRandom(3, 11);
context.font = fontSize + "vw 宋体 bold";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillStyle =
"rgba(" +
parseInt(getRandom(128, 255)) +
"," +
parseInt(getRandom(128, 255)) +
"," +
parseInt(getRandom(128, 255)) +
" , 1)";
context.fillText(text, fireworksCanvas.width / 2, fireworksCanvas.height / 2);
context.restore();
dots = gettingData(fireworks, context, dr);
callback(dots);
}
}
function implode(img, callback) {
if (img.complete) {
callback.call(img);
} else {
img.onload = function () {
callback.call(this);
};
}
}
function gettingData(fireworks, context, dr) {
let imgData = context.getImageData(0, 0, fireworksCanvas.width, fireworksCanvas.height);
context.clearRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);
let dots = [];
for (let x = 0; x < imgData.width; x += dr) {
for (let y = 0; y < imgData.height; y += dr) {
let i = (y * imgData.width + x) * 4;
if (imgData.data[i + 3] > 128) {
let dot = {
x: x,
y: y,
a: imgData.data[i],
b: imgData.data[i + 1],
c: imgData.data[i + 2],
};
dots.push(dot);
}
}
}
return dots;
}
function getRandom(a, b) {
return Math.random() * (b - a) + a;
}
let maxRadius = 1,
sparks = [];
function drawFireworks() {
for (let i = 0; i < 100; i++) {
let spark = new newSpark();
sparks.push(spark);
spark.paint();
}
}
// 新建星火位置
let newSpark = function () {
this.x = Math.random() * fireworksCanvas.width;
this.y = Math.random() * 2 * fireworksCanvas.height - fireworksCanvas.height;
this.r = Math.random() * maxRadius;
};
newSpark.prototype = {
paint: function () {
fireworksObject.save();
fireworksObject.beginPath();
fireworksObject.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
fireworksObject.fillStyle = "rgba(255,255,255," + this.r + ")";
fireworksObject.fill();
fireworksObject.restore();
},
};
// 烟花点缀生成
let newEmbellishment = function (centerX, centerY, radius, color, tx, ty) {
this.tx = tx;
this.ty = ty;
this.x = centerX;
this.y = centerY;
this.dead = false;
this.radius = radius;
this.color = color;
};
newEmbellishment.prototype = {
paint: function () {
fireworksObject.save();
fireworksObject.beginPath();
fireworksObject.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
fireworksObject.fillStyle =
"rgba(" + this.color.a + "," + this.color.b + "," + this.color.c + ",1)";
fireworksObject.fill();
fireworksObject.restore();
},
moveTo: function () {
this.ty = this.ty + 0.3;
let dx = this.tx - this.x,
dy = this.ty - this.y;
this.x = Math.abs(dx) < 0.1 ? this.tx : this.x + dx * 0.1;
this.y = Math.abs(dy) < 0.1 ? this.ty : this.y + dy * 0.1;
if (dx === 0 && Math.abs(dy) <= 80) {
this.dead = true;
}
this.paint();
},
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>新年烟花</title>
<link rel="icon" type="image/x-icon" href="https://pic.imgdb.cn/item/61f794ad2ab3f51d91b07a1e.png">
<link rel="stylesheet" href="static/css/style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
</head>
<body onselectstart="return false">
<!-- 消息提示 -->
<div class="message">
<p>请单击屏幕开启背景音乐</p>
</div>
<!-- 流星与星火 -->
<div id="backgroundRendering" style="z-index: 0;"></div>
<!--烟花-->
<canvas id="fireworks" style="z-index: 9999;">
您的浏览器不支持canvas标签。
</canvas>
<!-- 背景音乐 -->
<audio id="bgm" src="static/mp3/bgm.mp3" loop autoplay>
您的浏览器不支持 audio 标签。
</audio>
<!-- 自定义内容弹窗 -->
<div style="display: none">
<div class="shape">🏮2024新年快乐🏮</div>
<div class="shape">🏮恭喜发财🏮</div>
<div class="shape">🏮万事如意🏮</div>
<div class="shape">🏮吉庆有余🏮</div>
<div class="shape">🏮心想事成🏮</div>
<div class="shape">🏮喜气盈门🏮</div>
<div class="shape">🏮阖家欢乐🏮</div>
<div class="shape">🏮财源广进🏮</div>
</div>
<a class="github-fork-ribbon" href="https://github.com/uiuing/NewYearFireworks" data-ribbon="Fork me on GitHub"
title="Fork me on GitHub">Fork me on GitHub</a>
<script src="static/js/main.js"></script>
</body>
</html>
2. 新年快乐特效2
文件目录：
style.css
* {
/* 采用怪异模式下的盒模型：元素的总高度和宽度包含内边距和边框(padding与border) */
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
/* 没有滚动条 */
overflow: hidden;
}
.section {
display: flex;
justify-content: center;
align-items: center;
position: relative;
min-height: 100vh;
background: linear-gradient(135deg, #111, #222, #111);
}
.section::before {
content: "";
position: absolute;
width: 30vw;
height: 30vw;
/* 红色边框 */
border: 5vw solid #ff1062;
/* 圆形边框 */
border-radius: 50%;
/* 为边框添加2个下拉阴影 */
box-shadow: 0 0 0 1vw #222, 0 0 0 1.3vw #fff;
}
.section .section__title {
position: absolute;
transform: skewY(-7deg);
z-index: 10;
color: #fff;
text-align: center;
font-size: 9vw;
line-height: 2em;
text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #ccc, 3px 3px 0 #ccc, 4px 4px 0 #ccc,
5px 5px 0 #ccc, 10px 10px 0 rgba(0, 0, 0, 0.2);
animation: floating 5s ease-in-out infinite;
}
.section .section__title span {
text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #ccc, 3px 3px 0 #ccc, 4px 4px 0 #ccc,
5px 5px 0 #ccc, 6px 6px 0 #ccc, 7px 7px 0 #ccc, 8px 8px 0 #ccc,
9px 9px 0 #ccc, 20px 20px 0 rgba(0, 0, 0, 0.2);
font-weight: 700;
font-size: 3em;
}
.section i {
position: absolute;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff;
animation: animate linear infinite;
}
@keyframes floating {
0%,
100% {
transform: skewY(-7deg) translate(0, -20px);
}
50% {
transform: skewY(-7deg) translate(0, 20px);
}
}
/* 利用透明度设置星星明暗变化的动画效果 */
@keyframes animate {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
script.js
const stars = () => {
const count = 200;
const section = document.querySelector('.section');
let i = 0;
while (i < count) {
// 在内存中创建一个新的空元素对象,如i或是div
const star = document.createElement('i');
// 定义变量x和y ：通过Math.random()方法随机的使星星出现在不同位置，当然星星的定位要在文档显示区内
const x = Math.floor(Math.random() * window.innerWidth);
const y = Math.floor(Math.random() * window.innerHeight);
const size = Math.random() * 4;
// 让星星始终会在网页最左最顶端出现，通过想x和y的定位，我们要让它出现在页面各个不同的位置
star.style.left = x + 'px';
star.style.top = y + 'px';
// 利用Math.random()这个方法来随机取星星的大小：为每颗星星设置随机的宽高范围为[0,5)
star.style.width = 1 + size + 'px';
star.style.height = 1 + size + 'px';
const duration = Math.random() * 2;
// 设置持续时间
// js中除了减法计算之外，不允许随便写-。因为会混淆。所以，DOM标准规定，所有带-的css属性名，一律去横线变驼峰
// css属性animation-duration,在js中改写为驼峰形式：animationDuration
star.style.animationDuration = 2 + duration + 's';
// 设置延迟
star.style.animationDelay = 2 + duration + 's';
// 将新元素添加到DOM树：把新创建的节点追加到父元素下所有直接子元素的结尾
section.appendChild(star);
i++;
}
}
// 调用函数
stars();
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>2024新年快乐动画特效</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<section class="section">
<h2 class="section__title">Happy New Year<br /><span>2024</span></h2>
</section>
<script src="js/script.js"></script>
</body>
</html>
3. 新年快乐特效3
文件目录：
firework_types.js
window.onload = function(){
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
cw = window.innerWidth,
ch = window.innerHeight,
fireworks = [],
particles = [],
hue = 120,
limiterTotal = 20,
limiterTick = 0,
timerTotal = 0,
randomTime = 0,
timerTick = 0,
mousedown = false,
mx,
my;
canvas.width = cw;
canvas.height = ch;
var snd = new Audio("http://soundjax.com/reddo/51715%5Efirework.mp3");
function random( min, max ) {
return min + Math.random()*(max-min);
}
// calculate the distance between two points
function calculateDistance( p1x, p1y, p2x, p2y ) {
return Math.sqrt((p1x-p2x)*(p1x-p2x) + (p1y-p2y)*(p1y-p2y));
}
// create firework
function Firework( sx, sy, tx, ty ) {
//actual coordinates
this.x = sx;
this.y = sy;
//starting coordinate
this.sx = sx;
this.sy = sy;
//target coordinates
this.tx = tx;
this.ty = ty;
this.distanceToTarget = calculateDistance(sx, sy, tx, ty);
this.distanceTraveled = 0;
//track past coordinates to creates a trail effect
this.coordinates = [];
this.coordinateCount = 2;
while(this.coordinateCount--) {
this.coordinates.push( [this.x, this.y ]);
}
this.angle = Math.atan2(ty - sy, tx - sx);
this.speed = 1;
this.acceleration = 1.2;
this.brightness = random(50, 70);
this.tragetRadius = 1;
}
// update firework
Firework.prototype.update = function( index ) {
// if(this.distanceTraveled >= this.distanceToTarget ){
// fireworks.splice(index, 1);
// }
if( this.targetRadius < 8){
this.targetRadius += 0.3;
}else{
this.targetRadius = 1;
}
this.speed *= this.acceleration;
var vx = Math.cos(this.angle)*this.speed,
vy = Math.sin(this.angle)*this.speed;
this.distanceTraveled = calculateDistance(this.sx, this.sy, this.x + vx, this.y + vy);
if(this.distanceTraveled >= this.distanceToTarget ){
this.coordinates.pop();
this.coordinates.unshift([this.tx, this.ty]);
//this.x = this.tx; this.y = this.ty;
createParticles(this.x, this.y);
snd.play();
this.draw();
fireworks.splice(index, 1);
} else {
this.x += vx;
this.y += vy;
}
this.coordinates.pop();
this.coordinates.unshift([this.x, this.y]);
};
// draw firework
Firework.prototype.draw = function() {
ctx.beginPath();
// move to the last tracked coordinate in the set, then draw a line to the current x and y
ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
ctx.lineTo( this.x, this.y );
ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
ctx.stroke();
// ctx.beginPath();
// ctx.arc(this.tx, this.ty, this.targetRadius, 0, Math.PI*2);
// ctx.stroke();
}
// create particle
function Particle( x, y, type ) {
this.x = x;
this.y = y;
this.type = type;
this.coordinates = [];
this.coordinateCount = 6;
while( this.coordinateCount-- ) {
this.coordinates.push( [ this.x, this.y ] );
}
// TO Be Improved //
switch (type)
{
case 1: var variation = random(1, 5);
if (variation < 2)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 15 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 4;
// set the hue to a random number +-20 of the overall hue variable
this.hue = random( hue - 50, hue + 50 );
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.01, 0.02 );
}else if (variation < 3)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 5 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = random( hue - 50, hue );
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}else if (variation < 4)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 8 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = random( hue, hue + 50 );
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}else
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 15 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = random( hue - 50, hue + 50 );
this.brightness = random( 10, 20 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.3 );
}
break;
case 2: var variation = random(1, 5);
if (variation < 2)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 10 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 4;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 100;
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.01, 0.02 );
}else if (variation < 3)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 21 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 100;
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}else if (variation < 4)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 3 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 100;
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}else
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 5 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the othis.hue = 100;
this.hue = 100;
this.brightness = random( 10, 20 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.3 );
}
break;
case 3: var variation = random(1, 5);
// var hue = 10;
if (variation < 2)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 10, 15 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 4;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 60;
this.brightness = random( 10, 20 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.01, 0.02 );
}else if (variation < 3)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 11, 15 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 10;
this.brightness = random( 10, 20);
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}else if (variation < 4)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 11, 18 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 90;
this.brightness = random( 10, 20 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}else
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 11, 15 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 120;
this.brightness = random( 10, 20 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.3 );
}
break;
case 4: var variation = random(1, 5);
if (variation < 2)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 10 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 4;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 300;
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.01, 0.02 );
}else if (variation < 3)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 21 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 300;
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}else if (variation < 4)
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 3 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the overall hue variable
this.hue = 300;
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}else
{
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 5 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 3;
// set the hue to a random number +-20 of the othis.hue = 100;
this.hue = 100;
this.brightness = random( 10, 20 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.3 );
}
break;
default:
}
}
// update particle
Particle.prototype.update = function( index ) {
// slow down the particle
this.speed *= this.friction;
// apply velocity
this.x += Math.cos( this.angle ) * this.speed;
this.y += Math.sin( this.angle ) * this.speed + this.gravity;
// fade out the particle
// this.alpha -= this.decay * this.alpha;
this.alpha -= this.decay;
if (this.type == 4 && this.alpha <= 0.5){
this.brightness += 50;
this.hue += 200;
if (this.brightness >= 200)
this.brightness = 0;
}
// remove the particle once the alpha is low enough, based on the passed in index
if( this.alpha <= this.decay ) {
particles.splice( index, 1 );
}
// remove last item in coordinates array
this.coordinates.pop();
// add current coordinates to the start of the array
this.coordinates.unshift( [ this.x, this.y ] );
}
// draw particle
Particle.prototype.draw = function() {
ctx. beginPath();
// move to the last tracked coordinates in the set, then draw a line to the current x and y
ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
ctx.lineTo( this.x, this.y );
ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
ctx.stroke();
}
// create particle group/explosion
function createParticles( x, y ) {
var particleCount = 300;
var type = Math.floor(random(1, 5));
while(particleCount--){
particles.push(new Particle(x, y, type));
}
}
// main demo loop
function loop() {
//requestAnimFrame(loop);
hue += 0.5;
ctx.globalCompositeOperation = "destination-out";
ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
ctx.fillRect(0, 0, cw, ch);
ctx.globalCompositeOperation = "lighter";
var i = fireworks.length;
while(i--)
{
fireworks[i].draw();
fireworks[i].update(i);
}
// loop over each particle, draw it, update it
var i = particles.length;
while( i-- ) {
particles[ i ].draw();
particles[ i ].update( i );
}
if( timerTick >= timerTotal + randomTime ){
if (!mousedown){
var xPos = Math.pow(Math.floor((random(-Math.pow(cw/2, 1/3), Math.pow(cw/2, 1/3)))), 3);
xPos += cw/2;
fireworks.push( new Firework(cw/2, ch, xPos, random(0, ch/2)));
// fireworks.push( new Firework(cw/2, ch, random(-10, 100), random(0, ch/2)));
timerTick = 0;
randomTime = Math.pow(random(2, 4), 2);
}
} else {
timerTick++;
}
// limit the rate at which fireworks get launched when mouse is down
if( limiterTick >= limiterTotal ) {
if( mousedown ) {
// start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target
fireworks.push( new Firework( cw / 2, ch, mx, my ) );
limiterTick = 0;
} else {
limiterTick= limiterTotal;
}
} else {
limiterTick++;
}
}
// mouse event bindings
// update the mouse coordinates on mousemove
canvas.addEventListener( 'mousemove', function( e ) {
mx = e.pageX - canvas.offsetLeft;
my = e.pageY - canvas.offsetTop;
});
// toggle mousedown state and prevent canvas from being selected
canvas.addEventListener( 'mousedown', function( e ) {
e.preventDefault();
mousedown = true;
});
canvas.addEventListener( 'mouseup', function( e ) {
e.preventDefault();
mousedown = false;
});
setInterval(loop, 25);
};
index.html
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Cookie|Dancing+Script|Great+Vibes|Lobster+Two|Monoton|Sacramento" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- // <script type="text/javascript" src="firework.js"></script> -->
<script type="text/javascript" src="firework_types.js"></script>
<script type="text/javascript" src="particle_sets.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="box">
<center><p>Happy New Year 2024<br></p></center>
<br>
</p></center>
</div>
<canvas id="canvas"></canvas>
</body>
</html>
style.css
canvas {
top: 0;
left: 0;
background-color: #111;
}
body{
margin: 0.00;
overflow: hidden;
}
#box{
width:auto;
height:100%;
position:absolute;
text-align: center;
text-shadow:0 1px 1px rgba(0,0,0,.4);
display: flex;
transition: box-shadow .3s ease;
}
p{
COLOR:#FFF;
font-family:'Monoton', cursive;
font-size: 40px;
text-align:center;
}
.l{
color:#09fceb;
font-family:'Cookie', cursive ;
font-size:25px;
}
4. 新年快乐特效4
文件目录：
文件过多，需要可以私聊，这里不贴上来了！
5. 新年倒计时特效
文件目录：
_config.yml
theme: jekyll-theme-cayman
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<title>Make it snow</title>
</head>
<body>
<h1>❄️ 新 年 快 到 啦 ! ❄️</h1>
<div class="countdown-container">
<div class="time">
<h1 id="days">00</h1>
<small>days</small>
</div>
<div class="time">
<h1 id="hours">00</h1>
<small>hours</small>
</div>
<div class="time">
<h1 id="minutes">00</h1>
<small>minutes</small>
</div>
<div class="time">
<h1 id="seconds">00</h1>
<small>seconds</small>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
const body = document.body;
const endTime = new Date('February 9 2024 23:59:59');
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');
setInterval(updateCountdown, 1000)
setInterval(createSnowFlake, 50);
function updateCountdown() {
const startTime = new Date();
const diff = endTime - startTime;
const days = Math.floor(diff / 1000 / 60 / 60 / 24);
const hours = Math.floor(diff / 1000 / 60 / 60) % 24;
const minutes = Math.floor(diff / 1000 / 60) % 60;
const seconds = Math.floor(diff / 1000) % 60;
daysEl.innerHTML = days;
hoursEl.innerHTML = hours < 10 ? '0'+hours : hours;
minutesEl.innerHTML = minutes < 10 ? '0'+minutes : minutes;
secondsEl.innerHTML = seconds < 10 ? '0'+seconds : seconds;
}
function createSnowFlake() {
const snow_flake = document.createElement('i');
snow_flake.classList.add('fas');
snow_flake.classList.add('fa-snowflake');
snow_flake.style.left = Math.random() * window.innerWidth + 'px';
snow_flake.style.animationDuration = Math.random() * 3 + 2 + 's'; // between 2 - 5 seconds
snow_flake.style.opacity = Math.random();
snow_flake.style.fontSize = Math.random() * 10 + 10 + 'px';
document.body.appendChild(snow_flake);
setTimeout(() => {
snow_flake.remove();
}, 5000)
}
style.css
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #323975;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Muli', sans-serif;
height: 100vh;
overflow: hidden;
margin: 0;
text-align: center;
}
.fa-snowflake {
color: #fff;
position: absolute;
top: -20px;
animation: fall linear forwards;
}
@keyframes fall {
to {
transform: translateY(105vh);
}
}
.countdown-container {
display: flex;
}
.time {
display: flex;
font-size: 1.2em;
flex-direction: column;
margin: 0 15px;
}
.time h1 {
margin-bottom: 0;
}
.time small {
color: #ccc;
}
744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
