介绍

一个基于基于Html5的爱情主题，文字采用打字机效果，逐字打印，并带有键盘敲击声音。在chrome,safari,firefox,IE10下都有效，chrome下效果最佳。要注意的是safari下不支持audio标签属性没有声音效果（暂未解决）。

技术要点

文字效果采用本地化字体 @font-face

动态的心型用到的是HTML5的canvas

打字机声音效果采用HTML5的audio属性

效果图：

基于Html5的爱情主题网站--表白神器

查看示例

下载地址

基于Html5的爱情主题网站–表白神器的更多相关文章

  1. 基于Html5的爱情主题网站–表白神器(第二版)

    第二版在第一版的基础上增加了一个动态3D的白云效果背景,鼠标悬浮在页面上云朵会向屏幕Z轴方向运动,在第一人称视角看来向着云朵方向前进的,由此形成一个伪3D效果.有点绕,直接看demo就能理解了.3D白 ...

  2. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  3. 快速开发基于 HTML5 网络拓扑图应用

    采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/e ...

  4. 程序员用HTML5制作的爱心树表白动画

    体验效果:http://keleyi.com/keleyi/phtml/html5/31.htm 推荐:http://hovertree.com/texiao/css3/18/ HTML代码如下: & ...

  5. heX——基于 HTML5 和 Node.JS 开发桌面应用

    heX 是网易有道团队的一个开源项目,允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.heX 是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁 ...

  6. 基于Heritrix的特定主题的网络爬虫配置与实现

    建议在了解了一定网络爬虫的基本原理和Heritrix的架构知识后进行配置和扩展.相关博文:http://www.cnblogs.com/hustfly/p/3441747.html 摘要 随着网络时代 ...

  7. 一个酷炫的，基于HTML5,Jquery和Css的全屏焦点图特效，兼容各种浏览器

    基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 <!DOCTYPE html PUBLIC "-//W3C// ...

  8. 基于 HTML5 WebGL 的 3D 服务器与客户端的通信

    这个例子的初衷是模拟服务器与客户端的通信,我把整个需求简化变成了今天的这个例子.3D 机房方面的模拟一般都是需要鹰眼来辅助的,这样找产品以及整个空间的概括会比较明确,在这个例子中我也加了,这篇文章就算 ...

  9. 基于 HTML5 WebGL 的 3D SCADA 主站系统

    这个例子的初衷是模拟服务器与客户端的通信,我把整个需求简化变成了今天的这个例子.3D 的模拟一般需要鹰眼来辅助的,这样找产品以及整个空间的概括会比较明确,在这个例子中我也加了,这篇文章就算是我对这次项 ...

随机推荐

  1. c primer plus(五版)编程练习-第八章编程练习

    1.设计一个程序,统计从输入到文件结尾为止的字符数. #include<stdio.h> int main(void){ int ch; int i; i=; while((ch = ge ...

  2. Spark Shuffle（ExternalSorter）

    1.Shuffle流程 spark的shuffle过程如下图所示,和mapreduce中的类似,但在spark2.0及之后的版本中只存在SortShuffleManager而将原来的HashShuff ...

  3. boost pool 和 object_pool

    内存池(Memory Pool)是一种内存分配方式.        通常我们习惯直接使用new.malloc等API申请分配内存,这样做的缺点在于:由于所申请内存块的大小不定,当频繁使用时会造成大量的 ...

  4. SpringBoot 通过自定义注解实现AOP切面编程实例

    一直心心念的想写一篇关于AOP切面实例的博文,拖更了许久之后,今天终于着手下笔将其完成. 基础概念 1.切面(Aspect) 首先要理解‘切’字,需要把对象想象成一个立方体,传统的面向对象变成思维,类 ...

  5. HDU5183 hash 表

    做题的时候忘了 数据结构老师说的hash表了, 用二分找,还好过了, hash 表 对这题 更快一些 #include <iostream> #include <algorithm& ...

  6. Entity Framework Code First在Oracle下的伪实现（转）

    为什么要说是伪实现,因为还做不到类似MsSql中那样完全的功能.Oralce中的数据库还是要我们自己手动去创建的.这里,我们舍掉了Model First中的EDMX文件,自己在代码里面写模型与映射关系 ...

  7. selenium 中装饰器作用

    前面讲到unittest里面setUp可以在每次执行用例前执行,这样有效的减少了代码量,但是有个弊端,比如打开浏览器操作,每次执行用例时候都会重新打开,这样就会浪费很多时间.于是就想是不是可以只打开一 ...

  8. constructor-arg和property的区别

    两者都是给bean注入属性,区别: constructor-arg:通过构造函数注入. property:通过setter对应的方法注入. 详情见:https://blog.csdn.net/u012 ...

  9. NSwag给api加上说明

    参考http://petstore.swagger.io 给controller加上description https://github.com/RSuter/NSwag/issues/1803 xm ...

  10. Ubuntu 安装Docker

    参考:官网 安装依赖包: $ sudo apt-get update $ sudo apt-get install -y --no-install-recommends \ linux-image-e ...