HTML+CSS+JS制作爱心表白代码 520情人节源码HTML 七夕情人节表白代码制作 生日祝福代码
html+css+javascript制作爱心表白代码(卡通人物爱心表白-爱心形状浮动特效 )备
一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白
引用了CSS3的动画效果来显示，视觉效果相当不错！得此表白神器，程序猿也可以很浪漫！快去追你的女神吧！~~
1. PC(电脑端)演示
在线演示地址： 心心-样例图
2. H5 手机端
一、(代码实现)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title><link href="favicon.ico" rel="shortcut icon" class="icon-love" type="images/x-ico"><link rel="stylesheet" href="css/love.css"></head>
<body><div class="container" onselectstart="return false;" unselectable="on" style="-moz-user-select:none;"><div class="body_left"><img src="data:images/biubiubiu.gif" alt="" ondragstart='return false;'></div><div class="body_center love"><div class="block"><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div></div></div></div><div class="footer"><div class="border"><div class="border-top"></div><div class="border-bottom"></div></div></div><script type="text/javascript" src="js/love.js"></script>... 可关注下方↓ 公众号获取源码
</body>
</html>JS
let blocks = document.getElementsByClassName("block"),block = blocks[0],love = document.getElementsByClassName("love")[0],timer = null,index = 0, //记录拼接爱心的动画步骤clone_block; //用于克隆方块
function Next() {if (++index >= 24) {clearInterval(timer);Rise();// alert("已经是最后一个了！");return;}block.style.visibility = "visible"; //升空动画前允许可见//2.移动方块到指定的位置-即是移动【自身中心】到目标位置block.style.left = block_left + 40 * offset_pitn["block" + index][0] + "px";block.style.top = block_top - 40 * offset_pitn["block" + index][1] + "px";for (let i = 0; i < block.children.length; i++) {// block.children[1].innerText = index; //编号便于调试block.children[i].style.left = blk_pitn["block" + index][i][0] * -40 + "px";/* -40 是因为逻辑坐标和浏览器的x，y轴方向不一样*/block.children[i].style.top = blk_pitn["block" + index][i][1] * -40 + "px";}//3.克隆方块—保存现在的位置/* 一共会克隆23个方块，加上原先的一个方块block，共24个方块，即多出原先的block方块*/clone_block = block.cloneNode(true);love.appendChild(clone_block);if (love.children.length >= 24) {blocks[blocks.length - 1].children[2].style.display = "none"; //去掉多余的小方块block.style.display = "none"; //隐藏多出的block方块}
}function Rise() {//4.爱心升高，多出的那个小方块开始掉落console.log("开始升空");let timer2 = null,distance = 0;/* 升高时，移动的距离*/const target = 120, /* 目标距离*/speed = 1;/*移动速度*/let love_top = parseFloat(window.getComputedStyle(love, null).top.slice(0, -2)); //爱心盒子距离屏幕顶部的距离timer2 = setInterval(() => {distance += speed;// console.log(distance);if (distance >= target) {clearInterval(timer2);console.log("升空完毕");}love.style.top = (love_top - distance) + "px";}, 22);}window.onload = function () {setTimeout(() => {timer = setInterval(() => {Next();}, 300);}, 12000); //gif图播放完毕所需时间为11.73s
};二、做好的网页效果,如何通过发链接给别人看?
1.1 解决部署上线~> 部署上线工具(可永久免费使用)
1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~ 插件集成了超级多好用的插件，免费下载安装，简单易懂, 简直神器 ~ 需要可在文章 ↓ 下方公Z号获取
2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好哦~)
1.1部署流程
1.2 哇~ 部署成功
哇~ 部署成功! 将你写好的页面部署上线后, 全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~
三、❉ 源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉ 1.看到这里了就 [点赞+好评+收藏] 三连~ 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我~ 每天带你学习 :各种插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 编程 开发者，一起探讨 编程 知识，互相学习」！
❉ 3.以上内容技术相关问题可以相互学习，可加入主页编程学习基地
HTML+CSS+JS制作爱心表白代码 520情人节源码HTML 七夕情人节表白代码制作 生日祝福代码相关推荐
- 七夕节微信表白墙小程序源码/基于Laravel的表白墙微信小程序源码
七夕节微信表白墙小程序源码/基于Laravel的表白墙微信小程序源码 ☑️ 编号:ym499 ☑️ 品牌:无 ☑️ 语言:小程序 ☑️ 大小:11.2MB ☑️ 类型:微信表白墙小程序 ☑️ 支持:小 ...
- HTML+CSS+JavaScript制作结婚倒计时网页模板 520情人节表白源码HTML 七夕情人节表白源码HTML 生日祝福代码HTML...
❉ html+css+javascript制作结婚倒计时网页模板(520/七夕情人节/程序员告白) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白, ...
- 表白墙网站php源码,自适应响应式表白墙网站PHP源码 带后台管理
PHP表白墙源码校园版是一个以hybbs进行开发的校园表白墙php源码. 它可以做校园内的,也可以做校区间的,可封装成APP. 源码资源说明: 上传解压导入sql文件 修改inc/cofign.php ...
- HTML5网页设计期末大作业 ~金福普洱茶叶网页设计成品6页面带视频留言验证(HTML+CSS+JS)~ 学生hbuilder网页设计作业成品源码
作品介绍 1.网页作品简介 :采用html+css+js表单验证 2.网页作品编辑:作品下载后可使用任意HTML编辑软件(如:DW.HBuilder.NotePAD .Vscode .Sublime ...
- python语言表白源码-python七夕浪漫表白源码
本文实例为大家分享了python七夕浪漫表白的具体代码,供大家参考,具体内容如下 from turtle import * from time import sleep def go_to(x, y) ...
- 七夕节情人节微信表白墙小程序源码/基于Laravel的表白墙微信小程序源码
简介: 微信表白墙小程源码,表白墙最大的特色就是地域性,圈子性比较强,在地方县城里这种级别就比较合适,在大学里更是如鱼得水. 功能主要分为:表白墙.卖舍友.步数旅行.情侣脸.我的,大致功能都在图上了. ...
- web前端期末大作业 HTML+CSS+JS 游戏介绍【学生网页设计作业源码】
- 使用html+css+js实现一个静态页面（含源码）
- 520表白网站（附源码与修改教程）
520网站(附源码与修改教程) 一.前言 二.作品简介 三.表白小网站的修改 四.总结及其获取方式 一.前言 马上520了,有男朋友或者女朋友的小伙伴呢,可能又带来一个烦恼了,又是一个烦人的520,我 ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <! ...
最新文章
- java弹出网页alter_JavaScript三种弹出框（alert，confirm和prompt）用法举例
- c++ 获取64位进程模块地址_针对银行木马BokBot核心模块的深入分析
- Maven下载安装与配置环境变量与配置本地仓库
- JavaScript实现heapsort堆排序算法（附完整源码）
- php 各种进制表示,php各种进制的转换
- VMware虚拟机VMDK 快照 数据恢复成功
- java实用教程——组件及事件处理——布局管理(五种)
- 数据自治开放的软件开发和运行环境
- 读 利用python进行数据分析 后感
- java语言编程三角形图形_编程题：编写程序输入三角形的3条边长，计算并输出... 求助一道JAVA编程题：编写一个类似记事本的图形用......
- 安装docker环境
- 一位阿里云小哥要感谢“双11”，于是说了一段脱口秀……
- Unity 简单RPG对话系统——龙之谷2的NPC对话系统
- 博途的多步过程控制, 寄存器寻址
- 1-十四烷基-3-甲基咪唑六氟磷酸盐（[C14MIm][PF6]）修饰纳米SiO2二氧化硅（mg级瓶装）
- (一)彩色图片（RGB）转灰度图片
- FITC-WFA荧光素标记紫藤凝集素（WFA，WFL）
- 《算法通识16讲》学习笔记
- 记录一下自己配置Tomcat(9.0.69)
- HTML5~问卷调查页面的设计与实现