当前位置：首页 > news >正文

html动态爱心代码【四】(附源码)

news 文章来源：https://blog.csdn.net/weixin_74268571/article/details/132428875 2025/5/9 12:24:19

前言

特效

完整代码

总结

前言

情人节马上就要到了，为了帮助大家高效表白，下面再给大家带来了实用的HTML浪漫表白代码(附源码)+背景音乐，可用于520，情人节，生日，表白等场景，可直接使用。

特效

完整代码

html

<!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="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>

css

* {margin: 0;padding: 0;border: 0;
}
.icon-love {width: 400px;
}
html, body {width: 100%;height: 100%;
}body {/*background-color: skyblue;*/overflow: hidden;   /*隐藏超出的部分*/
}.container {width: 100%;height: 100%;position: relative;
}/*---------------------- body_left -------------------------*/
.body_left {width: 300px;height: 300px;left: 0;bottom: 110px;position: absolute;z-index: 98;}/*---------------------- body_left -------------------------*//*---------------------- body_center -------------------------*/
.container .love {width: 520px; /* 13 * 40 */height: 440px; /* 11 * 40 */left: 50%;top: 50%;position: absolute;margin: -260px 0 0 -220px;/*background-color: gray;*/
}.love .block {right: 0;position: absolute;visibility: hidden; /*未开始升空动画前隐藏*/background-color: yellow;
}.love .block div {width: 40px;height: 40px;position: absolute;background: url("../images/heart.png") no-repeat;background-size: contain;/*background-color: #c40908;*//*border: 1px solid silver;*/box-sizing: border-box;
}/*---------------------- body_center -------------------------*//*---------------------- footer -------------------------*/
@keyframes border {0% {width: 0;}5% {width: 5%;}10% {width: 10%;}15% {width: 15%;}20% {width: 20%;}25% {width: 25%;}30% {width: 30%;}35% {width: 35%;}40% {width: 40%;}45% {width: 45%;}50% {width: 50%;}55% {width: 55%;}60% {width: 60%;}65% {width: 65%;}70% {width: 70%;}75% {width: 75%;}80% {width: 80%;}85% {width: 85%;}90% {width: 90%;}95% {width: 95%;}100% {width: 100%;}}
.footer {bottom: 30px;position: relative;z-index: 99;
}
.footer .border .border-top {/*width: 0;*//*display: inline-block;*/border-top: 3px solid black;transform-origin: left center;-webkit-animation: border 312 linear;-o-animation: border 12s linear;animation: border 12s linear;animation-fill-mode : both;/*border-bottom: none;*/
}.footer .border .border-bottom {/*width: 0;*//*display: inline-block;*/float: right;border-top: 3px solid red;transform-origin: right center;-webkit-animation: border 7s linear 12s;-o-animation: border 7s linear 12s;animation: border 7s linear 12s;animation-fill-mode : both;/*border-bottom: none;*/
}.footer .copyright {width: 100%;height: 30px;position: absolute;bottom: -30px;text-align: center;/*background-color: gray;*/}.copyright div {width: 30%;line-height: 30px;display: inline-block;
}.copyright div span {color: dimgray;
}/*---------------------- footer -------------------------*/

const blk_pitn = { //各小方块相对【自身中心】的位置 -- 【自身中心】确定为#div22的方块block1: [[0, 1], [0, 0], [-1, 0], [-1, -1]],block2: [[0, 1], [0, 0], [-1, 0], [0, -1]],block3: [[-1, 1], [0, 0], [-1, 0], [-1, -1]],block4: [[0, 1], [0, 0], [-1, 0], [-1, -1]], /* 1 */block5: [[-1, 1], [0, 0], [-1, 0], [0, -1]],block6: [[0, -1], [0, 0], [-1, 0], [1, -1]],block7: [[-1, -1], [0, 0], [-1, 0], [1, 0]],block8: [[-1, 1], [0, 0], [-1, 0], [-1, -1]], /* 3 */block9: [[0, -1], [0, 0], [-1, 0], [1, 0]],block10: [[-1, 1], [0, 0], [-1, 0], [1, 0]],block11: [[2, 0], [0, 0], [-1, 0], [1, 0]], /* — */block12: [[0, 1], [0, 0], [-1, 0], [0, -1]], /* 2 */block13: [[0, 1], [0, 0], [-1, 0], [-1, -1]], /* 1 */block14: [[1, 1], [0, 0], [-1, 0], [1, 0]],block15: [[1, -1], [0, 0], [-1, 0], [1, 0]],block16: [[-1, -1], [0, 0], [-1, 0], [1, 0]], /* 7 */block17: [[0, 1], [0, 0], [-1, 0], [0, -1]], /* 2 */block18: [[0, 1], [0, 0], [-1, 0], [-1, -1]], /* 1 */block19: [[0, -1], [0, 0], [-1, 0], [1, 0]], /* 9 */block20: [[1, -1], [0, 0], [-1, 0], [1, 0]],block21: [[0, 1], [0, 0], [-1, 0], [-1, -1]], /* 1 */block22: [[1, 1], [0, 0], [-1, 0], [1, 0]], /* 14 */block23: [[0, 2], [0, 0], [0, -1], [0, 1]]      /* | */},offset_pitn = { //各方块block相对【爱心中心】的位置block1: [5, 3],block2: [5, 1],block3: [3, 4],block4: [3, 2],block5: [3, -1],block6: [2, 5],block7: [2, 1],block8: [1, -1],block9: [1, -3],block10: [1, 2],block11: [0, 3],block12: [0, 0], /* 【爱心中心】*/block13: [-1, -4],block14: [0, -2],block15: [-2, 4],block16: [-2, 2],block17: [-2, 0],block18: [-3, -2],block19: [-4, 0],block20: [-3, 5],block21: [-5, 3],block22: [-4, 1],block23: [-6, 1]    /* 因动画需要移动一个方块，故y轴坐标-1*/};let blocks = document.getElementsByClassName("block"),block = blocks[0],love = document.getElementsByClassName("love")[0],timer = null,index = 0,  //记录拼接爱心的动画步骤clone_block;    //用于克隆方块//1.移动方块的【自身中心】到【爱心中心】
block.style.top = "50%";
block.style.left = "50%";
block.style.margin = "-20px 0 0 -20px";const block_left = parseFloat(window.getComputedStyle(block, null).left.slice(0, -2)), //【爱心中心】 左边距离父元素的距离block_top = parseFloat(window.getComputedStyle(block, null).top.slice(0, -2));  //【爱心中心】 顶部距离父元素的距离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
};

图片

总结

css与js代码较多，便作了分离，大家导入html后，注意引入css和js

祝大家在情场顺风顺水

html动态爱心代码【四】(附源码)

目录前言特效完整代码总结前言情人节马上就要到了，为了帮助大家高效表白，下面再给大家带来了实用的HTML浪漫表白代码(附源码)背景音乐，可用于520，情人节，生日，表白等场景，可直接使用。…...

编程日记 2023/8/27 10:11:27

如何利用SLF4J扩展模块实现高效的日志记录

如何利用SLF4J扩展模块实现高效的日志记录摘要：SLF4J（Simple Logging Facade for Java）是一个用于 Java 程序中记录日志的简单门面，它提供了一种统一的日志记录接口，可以方便地切换底层的日志实现。SLF4J 还…...

编程日记 2023/8/27 10:10:27

通用语言模型蒸馏-GLMD

文章目录 GLMD一、PPT内容论文背景P1 BackgroundP2 Approach 相关知识P3 知识蒸馏P4 语言建模词预测逻辑方法P5 两阶段词汇预测蒸馏P6P7 词汇压缩实验结果P8 results 二、论文泛读2.1 论文要解决什么问题？2.2 论文采用了什么方法？2.4 论文达到什么效果…...

编程日记 2023/8/27 10:09:25

kafka--技术文档-基本概念-《快速了解kafka》

学习一种新的消息中间键，卡夫卡！！！ 官网网址 Apache Kafka 基本概念 Kafka是一种开源的分布式流处理平台，由Apache软件基金会开发，用Scala和Java编写。它是一个高吞吐量的分布式发布订阅消息系统&#xf…...

编程日记 2023/8/27 10:07:22

ChatGPT：ChatGPT 的发展史，ChatGPT 优缺点以及ChatGPT 在未来生活中的发展趋势和应用

目录 1.ChatGPT 是什么 2. ChatGPT 的发展史 3.ChatGPT 优缺点 4.ChatGPT 在未来生活中的发展趋势和应用 5.ChatGPT经历了几个版本 1.ChatGPT 是什么 ChatGPT 是一个在线聊天机器人，可以与使用者进行语义对话和提供帮助。它可以回答各种问题，提供建议…...

编程日记 2023/8/27 10:06:19

【八股】2023秋招八股复习笔记4（MySQL Redis等）

文章目录目录1、MySQLmysql索引实现mysql索引优化mysql索引失效的情况mysql 千万数据优化mysql 事务隔离级别 & 实现原理mysql MVCC版本链（undo log）mysql数据同步机制 & 主从复制 （binlog）mysql 日志&数据恢复&…...

编程日记 2023/8/27 10:05:18

【Unity】 Mesh 和 Mesh.subMeshCount

原文 https://www.cnblogs.com/hwx0000/p/12733582.html 什么是subMesh Mesh里面有这么一个参数mesh.subMeshCount，所以说明了subMesh是属于 Mesh的，subMesh是mesh的子mesh，subMesh所有的顶点数据信息都来自于对应的Mesh，subMes…...

编程日记 2023/8/27 10:04:14

Java开发中Word转PDF文件5种方案横向评测 https://blog.csdn.net/aley/article/details/127914145?ops_request_misc&request_id&biz_id102&utm_termjava%20%20word%20%E8%BD%ACpdf&utm_mediumdistribute.pc_search_result.none-task-blog-2allsobaiduweb~de…...

编程日记 2023/8/27 10:03:13

【前端】vscode前端插件笔记

前段vscode好用插件笔记不需要安装已经自带 HTML SnippetsPath IntellisenseAuto Rename TagBracket Pair Colorizer 核心好用中文包关键步骤：controlshift然后display language切换即可open in browserLive Server 实时效果显示JS-CSS-HTML Formatter保存后格…...

编程日记 2023/8/27 10:02:12

windows MFC消息demo

1、在BEGIN_MESSAGE_MAP添加MAP映射 BEGIN_MESSAGE_MAP(CdesktopTotalMapDlg, CDialogEx)ON_MESSAGE(WM_SYS_NORMAL_MSG, OnSysNormalMessage)ON_WM_SYSCOMMAND()ON_WM_PAINT()ON_WM_QUERYDRAGICON()ON_BN_CLICKED(IDC_BUTTON_SELECTSOURCEDIR, &CdesktopTotalMapDlg::OnB…...

编程日记 2023/8/27 10:01:10

尚硅谷大数据项目《在线教育之离线数仓》笔记003

视频地址：尚硅谷大数据项目《在线教育之离线数仓》_哔哩哔哩_bilibili 目录第8章数仓开发之DIM层 P039 P040 P041 P042 P043 P044 P045 P046 P047 P048 第8章数仓开发之DIM层 P039 第8章数仓开发之DIM层 DIM层设计要点： （1&a…...

编程日记 2023/8/27 10:00:10

银河麒麟arm版服务器安装docker

安装在线安装：输入下面命令，等待安装完成即可 #关闭防火墙 systemctl stop firewalld.service systemctl disable firewalld.serviceyum install -y docker# 修改docker拉取源为国内 rm -rf /etc/docker mkdir -p /etc/docker touch /etc/docker/da…...

编程日记 2023/8/27 9:59:08

三个视角解读ChatGPT在教学创新中的应用

第一，我们正处于一个学生使用ChatGPT等AI工具完成作业的时代，传统的教育方法需要适应变化。教育工作者不应该因为学生利用了先进技术而惩罚他们，相反，应该专注于让学生去挑战超越AI能力范围的任务。这需要我们重新思考教育策略和…...

编程日记 2023/8/27 9:58:07

PHP求职招聘系统Dreamweaver开发mysql数据库web结构php编程计算机网页

一、源码特点 PHP 求职招聘系统是一套完善的web设计系统，对理解php编程开发语言有帮助，系统具有完整的源代码和数据库，系统主要采用B/S模式开发。源码 https://download.csdn.net/download/qq_41221322/88240283 论文 https://down…...

编程日记 2023/8/27 9:57:06

Mysql 基本概念

数据库的组成数据数据是描述事务的符号记录；包括数字、文字、图形、图像、声音、档案记录等以“记录“形式按统一的格式进行存储表将不同的记录以行和列的方式组合成了表用来存储具体数据数据库它就是所有不同属性表的集合以一定的组织方式存储的…...

编程日记 2023/8/27 9:56:05

python开发--文件敏感信息识别

0x00 背景文档中敏感信息识别。不限于word, pdf 等文件格式中的敏感信息及其中的图片敏感信息识别。 0x01 识别原理以word文档为例 .docx文件有很多种结构，这些结构在python-docx中用3种不同的类型来表示：最高一层是Document对象表示文档&#xff0…...

编程日记 2023/8/27 9:55:04

【力扣】746. 使用最小花费爬楼梯＜动态规划＞

【力扣】746. 使用最小花费爬楼梯给你一个整数数组 cost ，其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用，即可选择向上爬一个或者两个台阶。你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯。请你计算并返回达到楼梯顶…...

编程日记 2023/8/27 9:54:01

sftp命令添加端口(亲测)

要在sftp命令中指定端口，请使用以下语法： sftp -oPort<port_number> <username><host> 其中，<port_number>是你要连接的SFTP服务器的端口号，<username>是登录SFTP服务器所使用的用户名&#xff0…...

编程日记 2023/8/27 9:52:59

Redis.conf详解

Redis.conf详解配置文件unit单位对大小写不敏感包含网络 bind 127.0.0.1 # 绑定的ip protected-mode yes # 保护模式 port 6379 # 端口设置通用 GENERAL daemonize yes # 以守护进程的方式运行默认为no pidfile /var/run/redis_6379.pid #如果以后台的方式运行&#xff…...

编程日记 2023/8/27 9:51:58

【论文笔记】Planning and Decision-Making for Autonomous Vehicles

文章目录 Summary1. INTRODUCTION2. MOTION PLANNING AND CONTROL2.1. Vehicle Dynamics and Control2.2. Parallel Autonomy2.3. Motion Planning for Autonomous Vehicles 3. INTEGRATED PERCEPTION AND PLANNING3.1. From Classical Perception to Current Challenges in Ne…...

编程日记 2023/8/27 9:50:57

html动态爱心代码【四】(附源码)

前言

特效

完整代码

总结

相关文章：

html动态爱心代码【四】(附源码)

如何利用SLF4J扩展模块实现高效的日志记录

通用语言模型蒸馏-GLMD

kafka--技术文档-基本概念-《快速了解kafka》

ChatGPT：ChatGPT 的发展史，ChatGPT 优缺点以及ChatGPT 在未来生活中的发展趋势和应用

【八股】2023秋招八股复习笔记4（MySQL Redis等）

【Unity】 Mesh 和 Mesh.subMeshCount

Java开发中Word转PDF

【前端】vscode前端插件笔记

windows MFC消息demo

尚硅谷大数据项目《在线教育之离线数仓》笔记003

银河麒麟arm版服务器安装docker

三个视角解读ChatGPT在教学创新中的应用

PHP求职招聘系统Dreamweaver开发mysql数据库web结构php编程计算机网页

Mysql 基本概念

python开发--文件敏感信息识别

【力扣】746. 使用最小花费爬楼梯＜动态规划＞

sftp命令添加端口(亲测)

Redis.conf详解

【论文笔记】Planning and Decision-Making for Autonomous Vehicles

视频云存储/安防监控EasyCVR视频汇聚平台接入GB国标设备时，无法显示通道信息该如何解决？

git中，add到暂存区，commit且push之后，暂存区域里还有内容吗

java中用SXSSFWorkbook把多个字段的list数据和单个实体dto导出到excel如何导出到多个sheet页详细实例?

ES基础操作

PCIE超高速实时运动控制卡在六面外观视觉检测上的应用

ctfshow web入门 php特性 web108-web112

数据可视化是什么？有什么工具？

PC端版面设计之尾部设计

neo4jd3拓扑节点显示为节点标签（自定义节点显示）

网络安全（黑客）了解学习路线