html5新年动画祝福,canvas动画效果新年祝福话语

本文介绍如何使用HTML、CSS和JavaScript创建一个新年祝福动画,通过逐个显示文字和调整元素位置,实现了从愿望到祝福的过渡效果。CSS动画和JavaScript控制了元素的透明度、位置和大小变化。
摘要由CSDN通过智能技术生成

html代码

css代码

* {

margin: 0;

padding: 0;

}

ul {

list-style: none;

position: relative;

}

ul.slow li {

transition: 2.4s all;

}

li {

width: var(--rect-width);

height: var(--rect-width);

position: absolute;

transition: 2s all;

left: 0;

top: 0;

background: black;

opacity: 0;

transform: translate(500px, 100px);

}

js代码

"use strict";

const rectwidth = parsefloat(document.documentelement.style.getpropertyvalue('--rect-width'));

const canvas = document.createelement('canvas');

canvas.width = 100;

canvas.height = 20;

const ctx = canvas.getcontext('2d');

ctx.font = '100 18px monospace';

ctx.textbaseline = 'top';

ctx.textalign = 'center';

const ul = document.getelementbyid('ul');

function drawtext(text) {

ctx.clearrect(0, 0, canvas.width, canvas.height);

const gradient = ctx.createlineargradient(10, 0, canvas.width - 10, 0);

gradient.addcolorstop(0, 'red');

gradient.addcolorstop(1 / 6, 'orange');

gradient.addcolorstop(2 / 6, 'yellow');

gradient.addcolorstop(3 / 6, 'green');

gradient.addcolorstop(4 / 6, 'blue');

gradient.addcolorstop(5 / 6, 'indigo');

gradient.addcolorstop(1, 'violet');

ctx.fillstyle = gradient;

ctx.filltext(text, canvas.width / 2, 2);

const imagedata = ctx.getimagedata(0, 0, canvas.width, canvas.height);

let ili = 0;

for (let column = 0; column < imagedata.width; column++) {

for (let row = 0; row < imagedata.height; row++) {

const idx = ((row * imagedata.width) + column) * 4;

if (imagedata.data[idx + 3] > 0) {

const li = ul.children[ili++];

li.style.opacity = '1';

li.style.transform = `translate(

${column * rectwidth}px,

${row * rectwidth}px)

scale(1.5)`;

li.style.background =

`rgba(${imagedata.data[idx]},${imagedata.data[idx + 1]},${imagedata.data[idx + 2]},${imagedata.data[idx + 3] / 255})`;

}

}

}

while (ili < 2000) {

const li = ul.children[ili++];

li.style.opacity = '0';

}

}

const timeout = t => new promise(resolve => settimeout(resolve, t));

void async function main() {

const duration = 2500;

{

let i = 2000;

const fragment = document.createdocumentfragment();

while (i-- > 0) {

fragment.appendchild(document.createelement('li'));

}

ul.appendchild(fragment);

}

await timeout(100);

drawtext('新年愿望');

await timeout(duration);

drawtext('身体健康');

await timeout(duration);

drawtext('有很多钱');

await timeout(duration);

ul.classlist.add('slow');

drawtext('新年快乐!');

}();

效果图

f17fe2278fe670992ceb8d5e128080e5.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值