介绍

一个基于基于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. 上传文件小的oK，大一点的传不了，显示 (failed) net::ERR_CONNECTION_RESET

    我很确定已经修改了php.ini中的文件上传限制,文件权限可写. 修改php.ini file_uploads = on ;是否允许通过HTTP上传文件的开关.默认为ON即是开 upload_tmp_ ...

  2. OpenResty--mysql,redis 项目中的应用

    最近刚刚接手同事的OpenResty的项目,发现对mysql,redis的操作没有用连接池,故对此进行了改造. MYSQL 主要是通过mysql_pool.lua 和 dbutil.lua 来封装对数 ...

  3. 前端基础（jQuery）

    jquery: JS Bootstrap jquery: write less do more jquery对象: Jquery.方法 ======= $.方法 jquery的基础语法:$(selec ...

  4. curl获取远程文件内容

    curl获取远程文件内容 ** 获取远程文件内容 @param $url 文件http地址 * function fopen_url($url) { if (function_exists(& ...

  5. Flask添加翻页功能（非sqlalchemy）

    最近做flask的项目,需要增加翻页的功能,网上找的教程都是结合sqlalchemy的,可是我用的不是sqlalchemy,肿木办呢? 以下是我的做法 一.前端 1.传递页码 前端我使用ajax提交表 ...

  6. Java StringBuffer 和 StringBuilder 类

    当对字符串进行修改的时候,需要使用 StringBuffer 和 StringBuilder 类. 和 String 类不同的是,StringBuffer 和 StringBuilder 类的对象能够 ...

  7. OpenCV图像增强算法实现（直方图均衡化、拉普拉斯、Log、Gamma）

    http://blog.csdn.net/dcrmg/article/details/53677739 1. 基于直方图均衡化的图像增强   直方图均衡化是通过调整图像的灰阶分布,使得在0~255灰阶 ...

  8. Python3.x：os.chdir（改变当前路径方法）介绍

    Python3.x:os.chdir(改变当前路径方法)介绍 1,os.chdir() import os os.chdir(r'C:\python36\test_chdir') 说明:chdir() ...

  9. ubuntu16.04下安装TensorFlow(GPU加速)----详细图文教程【转】

    本文转载自:https://blog.csdn.net/zhaoyu106/article/details/52793183 le/details/52793183 写在前面 一些废话 接触深度学习已 ...

  10. 【各类MQ比较】消息队列MQ

    目前业界有很多MQ产品,我们作如下对比: RabbitMQ 是使用Erlang编写的一个开源的消息队列,本身支持很多的协议:AMQP,XMPP, SMTP, STOMP,也正是如此,使的它变的非常重量 ...