明天就是情人节了，程序猿屌丝们是不是都是单身dog呢？今年很罕见，我不是单身啦。情人节老送花啊，巧克力啊，戒指，耳环啊等等这些东西当然。。。。不可避免啦。我们程序猿应该有我们自己的素养和浪漫情怀，今天我做了一个界面送给我的女朋友，用来表达我的爱意。界面打开后自动播放“滴答”的音乐，字幕像电影开场一样，一点一点的显示出来，引人入胜。其实我还做了另一个界面，类似微信里滑一滑翻页的效果，每个界面是我和女朋友去的地方的合照，当然，这个也要有配乐才有赶脚噢。这个界面代码以后有时间再放上来呀。闲话少说，show me the code.
目录结构：
MyLove/
/css
/js
/music
myword.html
代码如下：
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyWord</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.js"></script>
</head>
<body>
<div class="container">
<div class="os-phrases" id="os-phrases">
<h2>这个画面</h2>
<h2>送给</h2>
<h2>My Lover</h2>
<h2>美女</h2>
<h2>感谢你</h2>
<h2>出现在</h2>
<h2>我的世界</h2>
<h2>我希望</h2>
<h2>我们可以</h2>
<h2>开开心心</h2>
<h2>一起慢慢变老</h2>
</div>
</div><!-- /container -->
<audio controls autoplay>
<source src="music/my.mp3" />
cannot play
</audio>
<script src="js/jquery.js"></script>
<script src="js/jquery.lettering.js"></script>
<script>
$(document).ready(function() {
$("#os-phrases > h2").lettering('words').children("span").lettering().children("span").lettering();
})
</script>
</body>
</html>
这个界面算不上多完美和华丽，用了jquery的一个文字插件。女朋友名字就不写了。所有代码和歌曲都在附件中，主要是歌曲比较大，我在我电脑上能找到的为数不多的歌曲了。。。原谅我吧，音乐和美感造诣不深的程序猿。
PS:本来要做成一个android应用，cordova工程已经建好，将代码放到www目录里，安装后，界面根本跑不起来，我安装在小米2s上的，看来很多CSS3的特性在移动端webkit内核中还是不甚理想，也可能我搞得有问题？回头再看看吧，之后将代码放到手机里，用手机浏览器进行了测试，内置的safari和自己安装的chrome浏览器打开后都能完美展现，但是音乐貌似不能自动播放，需要手动点击播放按钮才行。PC端用chrome、firefox浏览器打开均可自动播放音乐。不好意思，IE浏览器我直接忽略了。
不喜欢上面做的也可以喷啊。。。
。
相关推荐
七夕情人节表白代码七夕情人节表白代码.zip七夕情人节表白代码.zip七夕情人节表白代码.zip七夕情人节表白代码.zip七夕情人节表白代码.zip七夕情人节表白代码.zip七夕情人节表白代码.zip七夕情人节表白代码.zip七夕...
在情人节告白页面中，CSS将起到至关重要的作用，可以用来设置背景色、文字颜色、字体大小和类型，以及创建动态效果，如心跳动画、闪烁星光、滑动文字等。例如，使用`@keyframes`规则可以创建动画，`.heart`类可以...
七夕情人节表白代码七夕情人节表白代码七夕情人节表白代码七夕情人节表白代码七夕情人节表白代码七夕情人节表白代码七夕情人节表白代码七夕情人节表白代码七夕情人节表白代码七夕情人节表白代码七夕情人节表白代码...
【七夕情人节表白程序网页版源码】是一个用于个人情感表达的互动网页程序，它无需数据库支持，方便用户快速修改并使用。这个源码可能是由一位热心的网站管理员或者开发者分享出来，目的是为了帮助大家在七夕这个特殊...
"女朋友超浪漫创意情人节表白软件"就是这样一个实例，它充分利用了技术的力量，为情侣间的互动增添了一份独特的魅力。这款软件旨在帮助用户通过数字化的方式来传达对另一半的深情厚意，尤其是在情人节这个特殊的日子...
当谈到“七夕情人节表白HTML源码(两款)”时，我们可以理解为这是两个特别设计的HTML代码模板，旨在为浪漫的七夕节或情人节提供一种创新的表白方式。这些源码可能是互动式的，包含动画、音乐、图像或其他视觉效果，以...
此系统允许用户轻松创建个性化的情人节表白页面，为心爱的人带来惊喜。在本文中，我们将深入探讨这个系统的几个关键知识点。 首先，我们来了解PHP。PHP（Hypertext Preprocessor）是一种广泛使用的开源脚本语言，...
标题中的“情人节表白 love.rar”表明这是一个与情人节有关的项目，可能包含了一些浪漫的前端代码或设计元素，用于创建一个表白页面或者应用。这个压缩包很可能是为了帮助开发者或设计师在情人节这一天通过技术手段...
【表白网页12情人节七夕节520程序员表白源码】这个主题是关于程序员们在特殊节日，如情人节、七夕节或520（网络情人节）时，利用编程技术制作的创意表白方式。这类源码通常由HTML、CSS和JavaScript等前端技术构建，...
玫瑰的浪漫送给你，浓浓的情意伴着你，巧克力的柔情拿给你，甜甜的爱恋围着你，炙热的情话说给你，火火的恋情绕着你，情人节到，我爱你到永远，一生一世不分离！情人节表白小软件。
- **情人节、生日祝福等用途**: 这些网页适用于多种场合，如情人节表白、生日祝福等。 ### 知识点七：适用范围与受众 #### 7.1 适用人群 - **大学生**: 专门为大学生设计的网页设计作业模板，符合学生的技能水平和...
标题中的“表白网页5 情人节七夕节520程序员表白源码”指的是一个专门为程序员设计的，用于在特殊节日如情人节、七夕节或520（网络用语，我爱你的意思）表达爱意的网页源代码。这个源码可能是由HTML、CSS和...
"程序员表白代码之情人节快乐"这个主题，展示了他们利用编程语言和数字艺术来传达浪漫情怀的方式。下面，我们将深入探讨这一话题，揭示其中蕴含的IT知识点。 首先，表白代码通常是程序员运用编程语言创作的一段程序...
在这个“H5+JS+CSS情人节表白”的项目中，开发者利用这些技术来创建一个浪漫的表白页面，为特殊的日子增添情感色彩。 首先，HTML（超文本标记语言）是网页的基础结构，用于定义页面内容和布局。在该项目中，HTML ...
标签中的“情人节表白网站源码H5”、“情人节”和“表白”揭示了这个项目的主题和目标受众。这是一套代码，旨在帮助那些在情人节想要通过独特方式表达爱意的人，利用现代网页技术来创造一个特别的体验。 从压缩包子...
标题中的“情人节表白代码第四波”表明这是一系列利用编程技术制作的情人节浪漫表达方式，这次是第四个版本。这个项目可能包含了多种技术，旨在为情人节创造独特的互动体验。 描述详细介绍了这个表白代码实现的动画...
在这个七夕情人节，我们有一个特别的资源——“七夕情人节告白源码合集”。这个压缩包包含了近十个不同类型的告白特效，利用js、html和css这三种核心技术，为爱的人创造浪漫与惊喜。 首先，我们要理解js...
这个“情人节表白代码第二波~”就是一个很好的例子，利用技术来创造浪漫。这个项目的核心是通过编写代码来生成一个具有动画效果的心形图案，并且具备计时功能，记录相爱的天数，同时还允许用户自定义文字内容，使得...
HTML+CSS+JS制作爱心表白代码 520情人节源码HTML 七夕情人节表白代码制作 生日祝福代码 HTML+CSS+JS是制作爱心表白代码的三大利器，分别负责结构、样式和交互。在这个项目中，我们使用HTML结构化页面，CSS美化页面...