html5新年动画祝福,canvas动画效果新年祝福话语
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('新年快乐!');
}();
效果图
html5新年动画祝福,canvas动画效果新年祝福话语相关推荐
- HTML5系列代码:canvas动画--碰碰球
animation 属性是一个简写属性,用于设置六个动画属性: animation-name animation-duration animation-timing-function animatio ...
- html5画布时钟cnsd,canvas动画时钟
最近在学canvas,然后根据MDN上的例子做了个动画时钟(为什么要造个轮子,因为丑..) 这是MDN上的例子,怎么说呢,比较复古吧. 首先,找一张时钟的图片,就是下面这张了. --来自bigger ...
- canvas 粒子效果 - 手残实践纪录
canvas 实践 粒子效果 首先确定开发的步骤 准备基础的 html 跟 css 当背景 初始化 canvas 准备一个粒子类 Particle 编写粒子连线的函数 drawLine 编写动画函数 ...
- 【前端动画】实现动画的6种方式
引言 动画基本上分类两类:补间动画和帧动画. 补间动画:补齐中间的动画.由浏览器帮助补齐中间的状态,开发者只需要定义开始和结束的状态. 帧动画:除了开始与结束状态,开发者还可以定义中间关键帧的状态,可 ...
- HTML5 Canvas动画效果演示
HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...
- html5的canvas动画效果,HTML5 Canvas:制作动画特效
要在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果.这其实是一种视觉欺骗,原理就像播放电影一样,胶片上每一格是一帧图片,然 ...
- canvas动画科技园_7个惊艳的HTML5 Canvas动画效果及源码
HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...
- html5常用动画效果教程,HTML5教程 8个经典HTML5 Canvas动画学习
本篇教程探讨了HTML5教程 8个经典HTML5 Canvas动画学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < HTML5非常强大,尤其是Canvas ...
- html动画的 原理,HTML5 Canvas动画效果实现原理
在线演示 使用html5画布能够帮助我们快速实现简单的动画效果,基本原理如下: 每隔一定时间绘制图形并且清除图形,用来模拟出一个动画过程,可以使用context.clearrect(0, 0, x, ...
最新文章
- 计算机相关专业电气EE,申请条件电子电气工程ee专业与计算机科学cs专业大pk.docx...
- c语言中malloc分配矩阵,malloc,分配矩阵
- 【蓝桥杯】基础练习 十进制转十六进制
- 基于LVS对LAMP做负载均衡集群
- 国嵌c语言深度,国嵌C语言3部全
- mysql account locked_ORA-28000: the account is locked用户锁定问题排查解决
- Spark的存储管理
- 华为鸿蒙 OS 2020 计划曝光!手机仍然优先用安卓
- c语言定义一个strcmp函数,定义一个strcmp函数实现两个字符串比较,函数原型为int strcmp(char * p1,...
- 初中级工程师是否应急于学习html5?
- 深入探索C++对象模型(2)
- Cisco Packet Tracer入门--三层交换机局域网搭建教程
- 优盘插计算机上成快捷方式,u盘一插就变成快捷方式打不开怎么办 u盘变成快捷方式怎么办...
- 【工具】1343- NVS —— js 实现的node版本管理工具
- python外汇交易回测系统_StarQuant - 综合量化交易回测系统/平台
- 爬虫练习-荔枝直播(分享页)
- pkpm弹性时程分析计算书怎么出_【原创总结】结构菜鸟浅谈为何进行弹性时程分析(附操作详图)...
- 遇到bug我们如何分析定位?
- java实现zip压缩
- 【JavaScript】回调地狱、Promise