介绍

一个基于基于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. ZOJ Monthly, January 2019

    A: Little Sub and Pascal's Triangle Solved. 题意: 求杨辉三角第n行奇数个数 思路: 薛聚聚说找规律,16说Lucas 答案是 $2^p \;\;p 为 n ...

  2. python webdriver 测试框架-数据驱动DDT的例子

    先在cmd环境 运行 pip install ddt 安装数据驱动ddt模块  脚本: #encoding=utf-8 from selenium import webdriver import un ...

  3. linux下高并发网络应用注意事项

    本文转自:http://www.blogjava.net/bacoo/archive/2012/06/11/380500.html linux下高并发网络应用注意事项 vi /etc/sysctl.c ...

  4. 使用索贝尔(Sobel)进行梯度运算时的数学意义和代码实现研究

    对于做图像处理的工程师来说,Sobel非常熟悉且常用.但是当我们需要使用Sobel进行梯度运算,且希望得到“数学结果”(作为下一步运算的基础)而不是“图片效果”的时候,就必须深入了解Sobel的知识原 ...

  5. 20145104张家明 《Java程序设计》第一周学习总结

    20145104张家明 <Java程序设计>第1周学习总结 教材学习内容总结 在开学的第一周,通过了看书进行了系统的学习java,首先简单的了解java的发展历程,然后了解了JVM.JRE ...

  6. 2018-2019-1 20189215 《Linux内核原理与分析》第四周作业

    <庖丁解牛>第三章书本知识总结 计算机的三大法宝 存储程序计算机 函数调用堆栈 中断 操作系统的两把宝剑 中断上下文的切换--保存现场和恢复现场 进程上下文的切换 Linux内核源码的目录 ...

  7. Question: Database Of Tumor Suppressors And/Or Oncogenes

    https://www.biostars.org/p/15890/     71   5.9 years ago by Malachi Griffith ♦16k Washington Univers ...

  8. 使用javascript模拟常见数据结构（三）

    六.字典和散列表 我们已经知道,集合表示一组互不相同的元素(不重复元素).在字典中,存储的是键值对,其中键值是用来查询特定的元素的.字典和集合是很相似的,集合采用[值,值]的方式存储,而字典则是以[键 ...

  9. Java 字节的常用封装

    一. Java 的字节 byte (字节) 是 Java 中的基本数据类型,一个 byte 包含8个 bit(位),byte 的取值范围是-128到+127. byte 跟 Java 其他基本类型的关 ...

  10. 五句话搞定JavaScript作用域【转】

    JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...