html好看的爱心告白源码
文章列表
前言
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好看的爱心告白源码 点击下载
版权归原作者 xcLeigh 所有, 如有侵权,请联系我们删除。