【博主推荐】html好看的爱心告白源码
html好看的爱心告白源码
- 文章列表
- 前言
- 界面动态效果
- 主导航爱心
- 列1_(1-4)
- 列2_(1-6)
- 列3_(1-7)
- 列4_(1-7)
- 列5_(1-7)
- 列6_(1-7)
- 列7_(1-7)
- 列8_(1-6)
- 列9_(1-4)
- 源码下载
文章列表
前言
html好看的爱心告白源码,55个卡片汇聚爱心,每个卡片的爱情简言。酷炫的界面效果,精致的排版。下面咋们具体看看这个界面代码拆分。
HTML + JS +CSS
界面动态效果
整体页面的动态效果
操作方式1,快捷键 上下左右,可切换卡片
操作方式2,快捷键 ESC,可切换主导航,爱心汇集
操作方式3,鼠标滚轮,可切换卡片
操作方式4,点击右下角爱心图标
html好看的告白源码
主导航爱心
功能1,每个界面采用卡片绘制爱心;
功能2,右上角背景音乐暂停和播放功能;
功能3,点击每个卡片,可以放大查看内容。
列1_(1-4)
左标题,右背景音乐控制器,下边粉色操作提示,右边爱心导航。
<div id="/section-1/page-1" class="ft-page page-1" data-id="page-1"><p class="mytext"><span id="text-75" >白风夕</span> ❤ <span id="text-76" >黑丰息</span> <span id="text-77" >一生一世</span></p><p class="text2"><span>❤亲爱的,用键盘上下左右按键(鼠标滚轮)操作,来看我对你的告白❤</span></p>
</div>
列2_(1-6)
上边是爱情宣言,下边是爱情图片
<div id="/section-2/page-6" class="ft-page page-10" data-id="page-6"><p id="text-9" >一个人爱上你的原因,并不是你有多好,而是你对他有多重要。</p><img src="img/gif/love6.gif" style="">
</div>
列3_(1-7)
上边是爱情宣言,下边是爱情图片
<div id="/section-3/page-3" class="ft-page page-13" data-id="page-3">
<p id="text-13" >如果彼此出现早一点,也许就不会和另一个人十指紧扣。</p>
<img src="img/gif/love7.gif" style="">
</div>
列4_(1-7)
上边是爱情宣言,下边是爱情图片
<div id="/section-4/page-2" class="ft-page page-19" data-id="page-2"><p id="text-21" >不管是爱还是恨,因为掏心掏肺的付出过,因为深深的在乎过,所以刻骨铭心。</p><img src="img/gif/love11.gif" style="">
</div>
列5_(1-7)
上边是爱情宣言,下边是主题七个字
<div id="/section-5/page-1" class="ft-page page-25" data-id="page-1"><p><span id="text-27" >看一个女人是否真的爱你,要看你在饥寒交迫的时候</span></p><div class="fontstyle">致</div>
</div>
列6_(1-7)
上边是爱情宣言,下边是爱情图片
<div id="/section-6/page-6" class="ft-page page-37" data-id="page-6"><p id="text-42" >恨不得把他挂在嘴上招摇过市</p><img src="img/gif/love6.gif" style="">
</div>
列7_(1-7)
上边是爱情宣言,下边是爱情图片
<div id="/section-7/page-3" class="ft-page page-41" data-id="page-3"><p id="text-46" > 那就谁也不舍得说了</p><img src="img/gif/love10.gif" style="">
</div>
列8_(1-6)
上边是爱情宣言,下边是爱情图片
<div id="/section-8/page-3" class="ft-page page-48" data-id="page-3"><h3><span id="text-62" >你看街上依旧繁花似锦</span><span id="text-63" >阳光依然璀璨温柔</span></h3><img src="img/gif/love6.gif" style="margin-top:10rem;text-align:center;">
</div>
列9_(1-4)
上边是爱情宣言,下边是爱情图片
<div id="/section-9/page-4" class="ft-page page-55 right-img" data-id="page-4"><p class="text"><span id="text-73" >亲爱的:我不敢说我是世界上最爱你的人,但我敢说你是我最用心爱的人。</span><br /><br /><br /></p> <div class="fontstyle22"> ❤ 按【ESC】键,是我对你所有的心意</div>
</div>
源码下载
【博主推荐】html好看的爱心告白源码 点击下载
【博主推荐】html好看的爱心告白源码相关推荐
- 【博主推荐】html好看的音乐播放器(附源码)
html好看的音乐播放器 文章目录 1.主界面列表效果 2.主界面详情效果 3.背景风格1-背景色轮动 4.背景风格2-图片轮动 5.MP3免费下载 5.1 MyFreeMP3 5.2.铜钟音乐 源码 ...
- 【博主推荐】html下拉框树形(附好看的登录界面)
文章目录 [博主推荐]html下拉框树形(附好看的登录界面) 下拉框示例 下拉框代码 登录1示例 登录1代码 登录2示例 登录2代码 资源下载 [博主推荐]html下拉框树形(附好看的登录界面) [博 ...
- 【博主推荐】html好看的拼图小游戏(附源码)
拼图目录 html好看的拼图小游戏 1.拼图效果示意图 1.1 第一级 九宫格拼图 1.2 第二级 十六宫格拼图 1.3 第三级 三十二宫格拼图 14 第三级 八十一宫格拼图 2.图片切图说明 3.实 ...
- 【博主推荐】大数据可视化大屏(源码下载)
可视化大屏交流学习 提示:本文推荐好的大数据可视化源码,用于学习,用于项目,欢迎大家积极交流.持续更新贴-- 资源目录 可视化大屏交流学习 一. 某公司大数据展示模版2 二.大数据可视化通用素材 三. ...
- Flume Sinks官网剖析(博主推荐)
不多说,直接上干货! Flume Sources官网剖析(博主推荐) Flume Channels官网剖析(博主推荐) Flume Channel Selectors官网剖析(博主推荐) 一切来源于f ...
- Ubuntu16.04下Mongodb官网卸载部署步骤(图文详解)(博主推荐)
不多说,直接上干货! 前期博客 Ubuntu16.04下Mongodb官网安装部署步骤(图文详解)(博主推荐) https://docs.mongodb.com/manual/tutorial/ins ...
- Ubuntu14.04下Neo4j图数据库官网安装部署步骤(图文详解)(博主推荐)
不多说,直接上干货! 说在前面的话 首先,查看下你的操作系统的版本. root@zhouls-virtual-machine:~# cat /etc/issue Ubuntu 14.04.4 LTS ...
- DayDayUp:三观一致必将取代血缘关系,成为新的人际纽带(博主推荐文章)
DayDayUp:三观一致必将取代血缘关系,成为新的人际纽带(博主推荐文章) 导读 考察一个人的判断力,主要考察他信息来源的多样性. 有无数的可怜人,长期生活在单一的信息里,而且是一种完全被扭曲的,颠 ...
- Ubuntu14.04下Mongodb数据库可视化工具安装部署步骤(图文详解)(博主推荐)
不多说,直接上干货! 前期博客 Ubuntu14.04下Mongodb(离线安装方式|非apt-get)安装部署步骤(图文详解)(博主推荐) Ubuntu14.04下Mongodb官网安装部署步骤(图 ...
最新文章
- 基础总结(04)-- display:none;visibility:hidden;区别
- ADSL+NAT配置实例
- 一文教你如何高效使用 IDEA !
- python画曲线图例-Python数据分析-Matplotlib图标绘制
- 排成一条线的纸牌博弈问题
- 【译】 Web Components 的高级工具
- JAVA线程的interrupt
- 打包指令_将Vue项目打包为Windows应用(.exe)
- LeetCode 1489. 找到最小生成树里的关键边和伪关键边(并查集+kruskal最小生成树)
- angular2+ 中封装调用递归tree
- linux编辑复制多行命令,linux下文本编辑器vim的使用,复制-粘贴-替换-行号-撤销-多文件操作...
- mongodb 日志,(一个看日志解决新问题的方法) -- clwu
- linux安装R3.5.0
- 新版IAR软件打开旧版本创建的项目时出现的三个错误及其解决方案 is too long for segment definition
- 微信小程序常见的UI框架/组件库总结
- 【kali技巧】kali更新系统
- 信息收集 | 利用Google搜索语法进行Google Hacking
- 系统集成项目管理工程师(软考中级)—— 第二十二章 安全管理 笔记分享
- opencv保存设像头图片时调整白平衡功能
- 虚拟机操作工具--Xmanager5 下载/安装/使用