明天就是情人节了,程序猿屌丝们是不是都是单身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浏览器我直接忽略了。
不喜欢上面做的也可以喷啊。。。
相关推荐
七夕节、情人节表白用的HTML源码(两款)
8款情人节告白源码,全是HTML+CSS,代码简单,一看就会。赶紧用来向心仪的女神告白吧!
女朋友情人节送什么好,就这个DIY浪漫情人节表白软件吧!小浪漫,小创意,小惊喜!
七夕情人节表白系统网页版是一款采用php进行开发的情人节表白软件,只要进行简单的设置即可做出一个精美的情人节表白网站。
玫瑰的浪漫送给你,浓浓的情意伴着你,巧克力的柔情拿给你,甜甜的爱恋围着你,炙热的情话说给你,火火的恋情绕着你,情人节到,我爱你到永远,一生一世不分离!情人节表白小软件。
用HTML+JS+CSS3实现情人节表白
情人节表白网站源码H5情人节表白网站源码H5
情人节礼物,情人节表白网页代码,送给女朋友的情人节表白代码
源码来自站长分享 请勿用于商业买卖 谢谢!~ 采用无数据库形式,修改文字后即可使用,需要数据库支持的,请自行修改哦!
七夕情人节表白系统网页版是一款采用php进行开发的情人节表白软件,只要进行简单的设置即可做出一个精美的情人节表白网站。
情人节七夕节520程序员表白源码 效果博客对应表白网页12 地址:https://blog.csdn.net/m0_37916936/article/details/116608659
七夕情人节告白源码合集 近十个告白炫酷特效
情人节表白代码,展示了很好地动画效果,看起来很舒适。共有三个页面,第一个页面是点击开始的,切换文字效果。第二个页面是主页面,展示心型和文字,也有恋爱计时。第三个页面是一堆小心心冒出来,可以跟鼠标移动
蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生...
情人节表白代码,会出来一个大大的心,动画效果非常好,也有计时相恋多少天。还有一大段肉麻的文字,这些都可以自定义修改。
程序员表白代码之情人节快乐,绝对感天动地,希望程序员们找到好的归属!
C++语言情人节表白模板,99%几率成功,浪漫动态表白代码
人工智能-项目实践-情人节表白-521情人节表白利器 520表白神器 需要在服务器端部署 有爱心树、恋爱时间、音乐等
七夕情人节表白网页的手机版本,在手机上向它表达你的情人节祝福,我想是件很兴奋的事吧,用此代码可以轻松做出一个在手机上运行的表白网页。