介绍

一个基于基于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. Yarn之ResourceManager详细分析

    一.概述     本文将介绍ResourceManager在Yarn中的功能作用,从更细的粒度分析RM内部组成的各个组件功能和他们相互的交互方式. 二.ResourceManager的交互协议与基本职 ...

  2. MySQL server has gone away With statement: INSERT INTO `students`......

    mysql出现ERROR : (2006, 'MySQL server has gone away') 的问题意思就是指client和MySQL server之间的链接断开了. 首选分析给出可能出现的 ...

  3. （2）基本工作流（制作场景与UI）

    1.认识cocos编辑器主界面.   2.制作新场景:   1)打开我们新建的HelloCocos项目,新建场景名称为“Scene”,如下图:   2)点击新建,场景就被创建出来了,如下图:   3) ...

  4. cocos-lua基础学习（10）scheduler类学习笔记

    local scheduler = cc.Director:getInstance():getScheduler() local function shouldNotCrash(dt) end loc ...

  5. JAVA面试题整理（6）-JVM

    JVM 1.详细jvm内存模型 2.讲讲什么情况下回出现内存溢出,内存泄漏? 3.说说Java线程栈 4.JVM 年轻代到年老代的晋升过程的判断条件是什么呢? 5.JVM 出现 fullGC 很频繁, ...

  6. 20145301《网络对抗》shellcode注入&Return-to-libc攻击深入

    20145301<网络对抗>shellcode注入&Return-to-libc攻击深入 Shellcode注入 shellcode是什么? Shellcode是指能完成特殊任务的 ...

  7. 20145221 《Java程序设计》实验报告五：网络编程及安全

    20145221 <Java程序设计>实验报告五:网络编程及安全 实验要求 掌握Socket程序的编写 运行TCP代码包,结对进行,一人服务器,一人客户端 掌握密码技术的使用 利用加解密代 ...

  8. 第四章 consul cluster

    1.vagrant 为了模拟集群效果,使用vagrant. 1.1.首先下载vagrant https://www.vagrantup.com/downloads.html 说明:浏览器下载可能比较慢 ...

  9. 对CCLE数据库可以做的分析--转载

    转载:http://www.bio-info-trainee.com/1327.html 收集了那么多的癌症细胞系的表达数据,拷贝数变异数据,突变数据,总不能放着让它发霉吧! 这些数据可以利用的地方非 ...

  10. BZOJ 1833 【ZJOI2010】 数字计数

    题目链接:数字计数 没啥好说的,裸裸的数位\(dp\). 先枚举当前是算数字\(x\)出现的次数,设\(f_{i,j}\)表示从高位往低位\(dp\),\(dp\)完了前\(i\)位之后\(x\)出现 ...