客官，520到来之际，HTML 表白biu~代码何不来看看？

2024-03-03 13:40
文章标签 代码 html frontend 看看 520 表白 到来之际 biu 客官 何不

本文主要是介绍客官，520到来之际，HTML 表白biu~代码何不来看看？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

哈喽，大家好，下面呢我们来看看代码实现的效果吧。

 🥇个人主页：个人主页        ​​​​​

🥈 系列专栏：【前端】      

🥉与这篇表白相关的文章：

用 JSP 连接 MySQL 登入注册项目实践用 JSP 连接 MySQL 登入注册项目实践(JSP + HTML + CSS + MySQL)_一个名叫追的程序猿的博客-CSDN博客_jsp+mysql登录注册界面
IntelliJ IDEA 常用快捷键(开发效率提升的是不只一点点惹)IntelliJ IDEA 常用快捷键(开发效率提升的是不只一点点惹)_一个名叫追的程序猿的博客-CSDN博客_idea循环快捷键
恭喜你~遇到了最有趣的排序算法恭喜你~遇到了最有趣的排序算法_一个名叫追的程序猿的博客-CSDN博客

目录

📍HTML实现部分📸

📍CSS 实现部分📸

📍JavaScript 实现部分📸

首先我们来看看效果是怎样的。

​

实现思路

我们有个 GIF 图，让它自己自动播放，进度条随着变化跟着变化 ，设置个数组，记录每个小爱心的位置，让它们逐一显示（总体来看就是，有两个盒子（div）上下结构，一个盒子（div）装小人与爱心（小人与爱心又是两个盒子（div）），另一个盒子（div）装最下面的进度条）。

HTML实现部分

🎆先看 HTML 部分与 CSS 的部分，在左边有个 GIF 让他自己自动播放

    <div class="body_left"><img src="images/biubiubiu.gif" alt="" ondragstart='return false;'> 
<!--        ondragstart:开始拖动元素时发生。--></div>
.body_left {width: 300px;height: 300px;left: 0;bottom: 110px;position: absolute;z-index: 98;}

CSS 实现部分

🎆再设置其他 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;
}

🎆中间的爱心部分 HTML 部分与 CSS 的部分

    <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>
.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;
}

🎆一个大的 div 我们已经写好了，下面是页脚（进度条的展示）。

<div class="footer"><div class="border"><div class="border-top"></div><div class="border-bottom"></div></div></div>

.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;
}

🎆然后我们需要设置动画的效果

@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%;}}

JavaScript 实现部分​​​​​​​

🎆最后我们来看看 JS 代码

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
};

注意：

这里有个小细节，我们无论是内部引入 js 文件还是外部引入 js 文件，我们要把 js 放在 html 的下面，让页面先显示出页面内容，再加载 js 代码展示效果，如果不这样的话会导致页面效果加载过慢，严重时可能造成页面空白。

（求关注）持续更新中……

这篇关于客官，520到来之际，HTML 表白biu~代码何不来看看？的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

原文地址:https://blog.csdn.net/aasd23/article/details/124767548
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.chinasem.cn/article/769786。

相关文章

前端下载文件时如何后端返回的文件流一些常见方法

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》：本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子：使用 Blob
阅读更多...
Vuex Actions多参数传递的解决方案

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法（推荐）二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript
阅读更多...
使用Python实现全能手机虚拟键盘的示例代码

使用Python实现全能手机虚拟键盘的示例代码

《使用Python实现全能手机虚拟键盘的示例代码》在数字化办公时代,你是否遇到过这样的场景：会议室投影电脑突然键盘失灵、躺在沙发上想远程控制书房电脑、或者需要给长辈远程协助操作？今天我要分享的Pyth... 目录一、项目概述：不止于键盘的远程控制方案1.1 创新价值1.2 技术栈全景二、需求实现步骤一、需求
阅读更多...
Java中Date、LocalDate、LocalDateTime、LocalTime、时间戳之间的相互转换代码

Java中Date、LocalDate、LocalDateTime、LocalTime、时间戳之间的相互转换代码

《Java中Date、LocalDate、LocalDateTime、LocalTime、时间戳之间的相互转换代码》：本文主要介绍Java中日期时间转换的多种方法,包括将Date转换为LocalD... 目录一、Date转LocalDateTime二、Date转LocalDate三、LocalDateTim
阅读更多...
jupyter代码块没有运行图标的解决方案

jupyter代码块没有运行图标的解决方案

《jupyter代码块没有运行图标的解决方案》：本文主要介绍jupyter代码块没有运行图标的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录jupyter代码块没有运行图标的解决1.找到Jupyter notebook的系统配置文件2.这时候一般会搜索到
阅读更多...
Python通过模块化开发优化代码的技巧分享

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版：拆分成模块让模块更强大：使用 __init__.py你一定会遇到的问题模www.
阅读更多...
Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
CSS Padding 和 Margin 区别全解析

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd
阅读更多...
CSS will-change 属性示例详解

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSSwill-change属性详解，感... will-change 是一个 css 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化
阅读更多...
CSS去除a标签的下划线的几种方法

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧... 在 css 中，去除a标签（超链接）的下划线主要有以下几种方法：使用text-decoration属性通用选择器设置：使用a标签选择器，将tex
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2