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, ...
最新文章
- java实现计分_非常实用的java自动答题计时计分器
- Quzrtz 使用oracle集群无法正常启动问题解决
- html中样式控制的问题
- 【转】wordpress/wp-includes目录文件概述
- java tomcat 日志分析工具_设计一个Tomcat访问日志分析工具
- 粉丝关注数据库表的设计
- 计算机网络基础试题库4答案,计算机网络基础试题库4.doc
- Excel 通过DDE与INTOUCH通信,数据格式
- 驻点运维人员被客户投诉要求换人,换还是不换?
- 苹果状态栏HTML,有关HTML5页面在iPhoneX适配问题
- php+mysql实现统计网站访问量(一)
- 谈谈 Spring 中的 NoSuchBeanDefinitionException
- mongoose的删除和修改
- MyBatis从入门到精通__刘增辉(著)_ 电子工业出版社PDF下载
- python评估函数_python绘制评估优化算法性能的测试函数
- 签名文件及使用360加固保生成渠道包
- 组播及igmp/mld协议详解(二)
- 设置窗口Qt example 之 简易字典
- GT-suite v2016解决许可证过期问题(附新版liscense下载地址)
- MySQL - 高可用性:少宕机即高可用?