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

介绍下three.js:

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面。

有兴趣的朋友可以学习下。

注意:3D动态白云背景效果只最新的chrome和firefox下有效,firefox下有点卡。IE和safari不支持。

效果图

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

查看示例

下载地址

很多朋友都在问demo里的字体,这里说明下,不一一回答了,字体的名字叫senty小丸子。

这里不能传文件,我把字体放到我的网站里了,有需要的朋友可以去下载。

字体下载地址

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

  1. 基于Html5的爱情主题网站–表白神器

    介绍 一个基于基于Html5的爱情主题,文字采用打字机效果,逐字打印,并带有键盘敲击声音.在chrome,safari,firefox,IE10下都有效,chrome下效果最佳.要注意的是safari ...

  2. 安卓LED跑马灯 超炫酷的表白神器破解版

    链接:https://pan.baidu.com/s/11Wxll4iLdcEPq0wUBK6Ong 提取码:all4

  3. Thomas Brinkhoff 基于路网的移动对象生成器的使用[第二版]

    Thomas Brinkhoff 基于路网的移动对象生成器的使用 Thomas Brinkhoff 基于路网的移动对象生成器的使用 相关操作的说明 相关文件的说明 运行 导入eclipse后运行时选择 ...

  4. [osg][osgEarth][原]基于OE自定义自由飞行漫游器(第二版)

    在初级版上,进行新的漫游方式调整 头文件: #pragma once //南水之源 20180101 #include <osgGA/CameraManipulator> #include ...

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. javascript 注意事项

    1.submit input 标签的 type里的submit是提交表单的按钮 提交时应注意 为 标签加上 “name=""”字段和form标签,才能达到想要的效果  2.正则表达 ...

  2. HDU1724 Ellipse(数值积分)

    补一下一些小盲区,譬如simpson这种数值积分的方法虽然一直知道,但是从未实现过,做一道例题存一个模板. #pragma warning(disable:4996) #include<iost ...

  3. Android中的Adapter总结

    一.Adapter的介绍 An Adapter object acts as a bridge between an AdapterView and the underlying data for t ...

  4. [你必须知道的.NET]第二十九回:.NET十年(上)

    发布日期:2009.05.08 作者:Anytao © 2009 Anytao.com ,Anytao原创作品,转贴请注明作者和出处. /// <summary> /// 本文部分内容,已 ...

  5. SQL Server 基础 之 GROUP BY子句

    GROUP BY 子句用于聚合信息 先看个实例,没有使用 GROUP BY 子句 SELECT SalesOrderID,OrderQty FROM Sales.SalesOrderDetail WH ...

  6. 传说中的WCF(9):流与文件传输

    在使用Socket/TCP来传输文件,弄起来不仅会有些复杂,而且较经典的“粘包”问题有时候会让人火冒七丈.如果你不喜欢用Socket来传文件,不妨试试WCF,WCF的流模式传输还是相当强大和相当实用的 ...

  7. Java-马士兵设计模式学习笔记-总结

    <马士兵设计模式学习>学习了以下模式: 1.装饰者模式(例子:水管工,木工) 2.策略模式(例子:老师用职称比大小.学生用成绩比大小) 3.简单工厂模式(例子:VechileFactory ...

  8. linux下python启动第三方程序,并控制关闭

    import subprocess import os import signal p = subprocess.Popen("recordmydesktop -o /home/test/t ...

  9. Highcharts属性详解

    Highcharts的基本属性和方法详解 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学 ...

  10. C# const与static的理解

    C#  const与static的理解 static readonly与 const变量,作用是一样的,无论访问修饰符是不是public,还是其它(private. protected.interna ...