介绍

一个基于基于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. jdk eclipse SDK下载安装及配置教程

    原文地址https://blog.csdn.net/dr_neo/article/details/49870587 最新鲜最详细的Android SDK下载安装及配置教程 最近Neo突发神经,想要将学 ...

  2. 解决不能在本地使用JQuery load的方法

    $.ajaxSetup({ xhr: function () { if ("ActiveXObject" in window) { return new ActiveXObject ...

  3. 哈尔滨理工大学软件与微电子学院第八届程序设计竞赛同步赛(高年级) Solution

    A: Solved. 分别处理出每个%7后余数的数字个数,再组合一下 #include <bits/stdc++.h> using namespace std; #define ll lo ...

  4. android,结合Timer和TimerTask实现定时任务

    当我们需要每隔一段时间执行一个任务的时候,就需要使用TimerTask了,下面是入门的例子, 值得注意的是Timer.TimerTask,cancel之后就需要重新声明一个对象,否则会报错的哦~ pa ...

  5. 20155203 2016-2017-4 《Java程序设计》第8周学习总结

    20155203 2016-2017-4 <Java程序设计>第8周学习总结 教材学习内容总结 1.channel的继承架构 2.position()类似于堆栈操作中的栈顶指针. 3.Pa ...

  6. Entity Framework Code First级联删除(转)

    使用Data Annotations: 如果我们要到一对主从表增加级联删除,则要在主表中的引用属性上增加Required关键字,如: public class Destination { public ...

  7. C#——文件上传(一般处理程序ashx)

    Framework版本:.Net Framework 4 1.FileInfo实体 using System; using System.Collections.Generic; using Syst ...

  8. bzoj1601 / P1550 [USACO08OCT]打井Watering Hole(堆优化prim)

    P1550 [USACO08OCT]打井Watering Hole   对于自己建水库的情况,新建一个虚拟结点,和其他点的边权即为自建水库的费用 这样问题就转化为一个裸最小生成树问题了. 这里用堆优化 ...

  9. 20145325张梓靖 《Java程序设计》第2周学习总结

    20145325张梓靖 <Java程序设计>第2周学习总结 教材学习内容总结 整数 short 2字节,int 4字节,long 8字节 字节 byte 1字节 浮点数 float 4字节 ...

  10. Linux 下源码编译安装 vim 8.1

    前言 目前 linux 的各个发行版基本上都是带了一个 vi 编辑器的,而本文要说的 vim 编辑器对 vi 做了一些优化升级,更好用.当我们需要远程操作一台 linux 服务器的时候,只能使用命令行 ...