作品名称——Shape Shifter，基于 Canvas 的粒子图形变换实验。在页面下方的输入框输入文本，上面就会进行变换出对应的粒子效果文本动画。

　　CodePen 作品秀系列向大家展示来自 CodePen 网站的最优秀的 Web 效果，上面的那些 Demo 可以说都是艺术品，相信你看之后和我一样会被惊呆的！（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览）。

您可能感兴趣的相关文章

源码下载      全屏演示

本文链接：CodePen 作品秀：Canvas 粒子效果文本变换动画

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文出处【http://www.cnblogs.com/lhb25/】

CodePen 作品秀：Canvas 粒子效果文本动画的更多相关文章

  1. 基于HTML5 Canvas粒子效果文字动画特效

    之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的 ...

  2. canvas 粒子效果

    var canvas = document.createElement('canvas'); var cxt = canvas.getContext('2d'); var W = canvas.wid ...

  3. canvas粒子效果-snow

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. canvas实现的粒子效果

    前言:我的这个share很简单,没什么技术水准,主要是我自己觉得canvas这个标签很cool!,简单实用又能装X,而且又能实现很多看起来很炫的东西. 一 关于canvas <canvas> ...

  5. 基于HTML5 Canvas生成粒子效果的人物头像

    前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下 ...

  6. 基于canvas实现物理运动效果与动画效果(一)

    一.为什么要写这篇文章 某年某月某时某种原因,我在慕课网上看到了一个大神实现了关于小球的抛物线运动的代码,心中很是欣喜,故而写这篇文章来向这位大神致敬,同时也为了弥补自己在运动效果和动画效果制作方面的 ...

  7. iOS开发——UI进阶篇（十八）核心动画小例子，转盘（裁剪图片、自定义按钮、旋转）图片折叠、音量震动条、倒影、粒子效果

    一.转盘(裁剪图片.自定义按钮.旋转) 1.裁剪图片 将一张大图片裁剪为多张 // CGImageCreateWithImageInRect:用来裁剪图片 // image:需要裁剪的图片 // re ...

  8. iOS动画开发之五——炫酷的粒子效果

    在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一现,想用UIKit框架写出一款炫酷的休 ...

  9. Canvas + JavaScript 制作图片粒子效果

    首先看一下源图和转换成粒子效果的对比图:       左侧图片为源图,右侧图片为粒子效果图.该效果是在Canvas画布上制作的.将图片制作成粒子效果相对而言是比较简单的.重点了解两个知识点即可 1:图 ...

随机推荐

  1. OpenCascade Shape Representation in OpenSceneGraph

    OpenCascade Shape Representation in OpenSceneGraph eryar@163.com 摘要Abstract:本文通过程序实例,将OpenCascade中的拓 ...

  2. mongodb 关系、引用、覆盖索引查询

    一.关系 MongoDB 的关系表示多个文档之间在逻辑上的相互联系.文档间可以通过嵌入和引用来建立联系.MongoDB 中的关系可以是:1对1,1对多,多对1,多对多. 一个用户可以用多个地址,这是典 ...

  3. C#多线程之旅(4)——APM初探

    源码地址:https://github.com/Jackson0714/Threads 原文地址:C#多线程之旅(4)——APM初探 C#多线程之旅目录: C#多线程之旅(1)——介绍和基本概念 C# ...

  4. javascript运算符——逻辑运算符

    × 目录 [1]逻辑非 [2]逻辑与 [3]逻辑或 前面的话 逻辑运算符对操作数进行布尔运算,经常和关系运算符一样配合使用.逻辑运算符将多个关系表达式组合起来组成一个更复杂的表达式.逻辑运算符分为逻辑 ...

  5. 2014牡丹江网络zoj3816Generalized Palindromic Number（dfs或者bfs）

    #include <iostream> #include <stdio.h> #include <cmath> #include <algorithm> ...

  6. Android TextView 添加下划线的几种方式

    总结起来大概有5种做法:  1. 将要处理的文字写到一个资源文件,如string.xml(使用html用法格式化)   2. 当文字中出现URL.E-mail.电话号码等的时候,可以将TextView ...

  7. nginx常见内部参数，错误总结

    1.日志简介 nginx日志主要有两种:访问日志和错误日志.访问日志主要记录客户端访问nginx的每一个请求,格式可以自定义:错误日志主要记录客户端访问nginx出错时的日志,格式不支持自定义.两种日 ...

  8. mysql插入日期 vs oracle插入日期

    今天做oracle日期插入的时候突然开始疑惑日期是如何插入的. 用框架久了,反而不自己做简单的工作了.比如插入. 通常,新建一个表对象,然后绑定数据,前端form提交,后端getModel后直接mod ...

  9. .net后台模拟浏览器get/post请求

    #region 后台模拟浏览器get/post请求 /// <summary> /// 发送请求方式 /// </summary> /// <param name=&qu ...

  10. 运用javascript的成员访问特性来实现通用版的兼容所有浏览器的打开对话框功能

    打开网页对话框,一般有三种方法:window.open.window.showModalDialog.window.showModelessDialog,每一种都有它的优点与不足.第一种方法:wind ...