html5酷炫表白代码_七夕表白代码,樱花特效+爱心特效+花瓣+评论留言功能等

def9762ca4810532e3b1ae3f45ae8d96.png

4e4f3ae79620f0c5031e4bb8d6685cfe.png

___2020/8/25七夕不是快到了嘛,寻思最近没啥活,于是闲暇时间扒一套JQuery代码,做了一下优化 ------- 超级好看的花瓣表白网页源码,

59a235ffd0297921a75d39d2bcef50bb.png

___然后通过gitee(码云)搭建了一套个人网页,因为使用了valine公共评论平台,怕一些人发布不良言论,所以项目地址还不能公开.

1.这套代码效果挺不错的,缺点就是bug太多,应该是作者阉割过很多的,有一些cavans绘制的特效都阉掉了,修复起来难度比较大.就把相关js注释了.

156e423d2d972d3e6edbcaabdc422e2b.png

2.之前使用的评论模块应该是多说(duoshuo)第三方公开评论平台,但是这个网站已经被关闭了,不再提供服务,于是查找了一下,决定使用valine公开评论平台,不得不说这个确实是很棒,很多大神对这个进行了优化,有很多主题,此处我使用的原版.然后使用方法参考了—>这位大佬的博客.

3.考虑到直接进入页面比较单调,而且背景音乐前调挺长的,于是做了一个加载动画,此处引用的jquery库的—>HTML5制作3D樱花漫天飞舞,

4.这个项目点击不同花瓣时实际上是跳转了路由,于是就相当于切换了场景,BGM会重置,给人体验不太好,于是此处用了<frameset> <frame src="index.html"> </frameset>框架.

988855ab18cfefa0ae1e135c238e6a72.png

5.原项目的时间计算有些问题,这边进行了修复.只要在function.js中改一下,你们相遇的时间即可以正常计算并显示

6.加载动画B格有点高,直接进入页面后没有什么特效又比较low,于是参考某位大佬用canvas绘制了全屏的爱心特效biubiubiu,这下动静结合了,非常棒滴哟

7.移动端还没有兼容,演示起来没问题,只是鼠标滚动事件有些bug,接来下会抽时间兼容一哈.

————————————————

版权声明:本文为CSDN博主「sun shying」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:

七夕表白代码,樱花特效+爱心特效+花瓣+评论留言功能等_ju__ju的博客-CSDN博客​blog.csdn.net
b1ae30954a0a49c9198afdb6614b2a10.png
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的HTML5表白代码示例,其中包含弹窗效果: ```html <!DOCTYPE html> <html> <head> <title>520表白</title> <meta charset="utf-8"> <style type="text/css"> body { background: #f7f7f7; font-family: Arial, sans-serif; } .container { width: 400px; margin: 50px auto; background: #fff; padding: 20px; text-align: center; border-radius: 5px; box-shadow: 0 3px 10px rgba(0,0,0,0.2); } h1 { font-size: 36px; color: #f00; margin-bottom: 20px; } .btn { display: inline-block; background: #f00; color: #fff; padding: 10px 20px; border-radius: 5px; text-decoration: none; margin-top: 20px; transition: all 0.3s ease; cursor: pointer; } .btn:hover { background: #800000; } </style> </head> <body> <div class="container"> <h1>亲爱的XXX:</h1> <p>今天是520,我想对你说......</p> <button class="btn" onclick="showDialog()">点击查看表白</button> </div> <div id="dialog" style="display: none;"> <div class="container"> <h1>我喜欢你,愿意做你的程序员小伙伴!</h1> <p>520快乐!</p> <button class="btn" onclick="hideDialog()">关闭</button> </div> </div> <script type="text/javascript"> function showDialog() { document.getElementById('dialog').style.display = 'block'; } function hideDialog() { document.getElementById('dialog').style.display = 'none'; } </script> </body> </html> ``` 在此示例中,我们使用了一个DIV元素来创建弹出窗口。初始情况下,该元素被设置为隐藏。当用户单击“点击查看表白”按钮时,JavaScript函数showDialog()将被调用,以显示该元素。同样,当用户单击“关闭”按钮时,JavaScript函数hideDialog()将被调用,以隐藏该元素。 请注意,这只是一个简单的示例。如果您想要更多的交互性和动画效果,您可能需要使用JavaScript或CSS动画库等其他技术来实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值