作品名称——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. IO流-ZIP文档

    java中通常使用ZipInputStream来读ZIP文档 ZIP文档(通常)以压缩格式存储了一个或多个文件,每个ZIP文档都有一个包含诸如文件 名字和所使用的压缩方法等信息的头.在Java中,可以 ...

  2. Android源码

    Android 源码:http://grepcode.com/project/repository.grepcode.com/java/ext/com.google.android/android/

  3. JSP网站开发基础总结《五》

    开始本篇总结之前,首先聊一聊上一篇中存在的一点小问题,上上篇总结数据库创建表时,存在一个问题,name.year.form好像属于关键字,不能做为表的属性,所以大家注意一下,在创建表时保证表的属性不存 ...

  4. 小实例窥探dotnet垃圾回收

    今天项目调试时发现VS中有下面这样的现象. 说明,file.ServerLocation是一个完整的物理路径.第三句代码是错误的,保留只是因为它使用了"s"字符串.   个人认为当 ...

  5. Kruskal算法(一)之 C语言详解

    本章介绍克鲁斯卡尔算法.和以往一样,本文会先对克鲁斯卡尔算法的理论论知识进行介绍,然后给出C语言的实现.后续再分别给出C++和Java版本的实现. 目录 1. 最小生成树 2. 克鲁斯卡尔算法介绍 3 ...

  6. Python编码问题整理

    认识常见编码 GB2312是中国规定的汉字编码,也可以说是简体中文的字符集编码 GBK 是 GB2312的扩展 ,除了兼容GB2312外,它还能显示繁体中文,还有日文的假名 cp936:中文本地系统是 ...

  7. Tools - VirtualBox

    为CentOS虚拟机安装增强功能 启动CentOS虚拟机,点击"菜单 -> 设备 -> 安装增强功能". vboxadd的映像文件将会被挂载到虚拟机,在桌面也可以看到, ...

  8. Azure ARM (9) 创建ARM模式下的虚拟机网络

    <Windows Azure Platform 系列文章目录> 笔者在之前几章内容中,创建了ARM Resource Group,然后在这个ARM Resource Group下创建Azu ...

  9. HT for Web基于HTML5的图像操作（一）

    HT for Web独创的矢量图片设计架构,使其具有强大丰富的动态图形呈现能力,但从最近知乎热议的“Adobe Photoshop 是否已经过时?”的话题,大家能体会到很多情况下实际项目不可能完全采用 ...

  10. Dapper学习 - Dapper.Rainbow(二) - Update/Delete

    上一篇介绍了Rainbow的Create方法, 这里就来介绍一下Update方法吧, 毕竟新增和修改是双胞兄弟嘛. 一.Update 1. 测试代码: var conStr = Configurati ...