前端js代码，表白生成爱心

已于 2023-09-13 18:16:49 修改
阅读量1.2k 收藏 1
点赞数
文章标签： 前端 javascript 开发语言
于 2023-09-13 18:08:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/surnameyao/article/details/132860577
版权 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小太阳我爱你</title>
    <link rel="stylesheet" href="./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 class="border" style="margin-left: 30px;color: rgb(221, 186, 186);">
                <h2>you are my love</h2>
            </div>
        </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 class="footer">
            <div class="border">
                <div class="border-top"></div>
                <div class="border-bottom"></div>
            </div>
            <!-- 版本号、日期、著名 -->
            <div class="copyright">
                <div id="version"><span></span>&nbsp;Cynthia</div>
                <div id="createTime"><span>Time:</span>&nbsp;2023/9/8</div>
                <div id="author"><span>&copy;&nbsp;</span>yaoyao</div>
                <div id="autio">
                    <audio controls>
                        <source src="horse.ogg" type="audio/ogg">
                    </audio>
                </div>
            </div>
        </div>
    </div>
    <script src="./love.js"></script>
    <script>
        let blocks = document.getElementsByClassName("block")
        let block = blocks[0]
        let love = document.getElementsByClassName("love")[0] // 定义love为下标为0的元素
        let timer = null//定时器
        let index = 0//记录拼接爱心的动画步骤//用于克隆方块
        let 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))
        const block_top = parseFloat(window.getComputedStyle(block, null).top.slice(0, -2))
        function Next() {
            if (++index >= 24) {
                clearInterval(timer);
                Rise();
                return
            }
            block.style.visibility = "visible"//升空动画前允许可见
            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[i].style.left = blk_pitn["block" + index][i][0] * -40 + "px"
                block.children[i].style.top = blk_pitn["block" + index][i][1] * -40 + "px"
            }
            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";
            }
        }
        function Rise() {
            let timer2 = null
            let distance = 0
            const target = 120
            let speed = 2
            let love_top = parseFloat(window.getComputedStyle(love, null).top.slice(0, -2));
            timer2 = setInterval(() => {
                distance += speed
                if (distance >= target) {
                    clearInterval(timer2)
                }
                love.style.top = (love_top - distance) + "px"
            }, 22)
        }
        window.onload = () => {
            setTimeout(() => {
                timer = setInterval(() => {
                    Next()
                }, 300)
            }, 3000)
        }
    </script>
</body>

</html>

css

* {

    margin: 0;

    padding: 0;

    border: 0;

}

html,

body {

    width: 100%;

    height: 100%;

}

body {

    overflow: hidden;

}

.container {

    width: 100%;

    height: 100%;

    position: relative;

}

.body_left {

    width: 300px;

    height: 300px;

    position: absolute;

    left: 0;

    bottom: 110px;

    Z-index: 98;

}

.container .love {

    width: 520px;

    height: 440px;

    position: absolute;

    left: 50%;

    top: 50%;

    margin: -260px 0 0 -220px;

}

.love .block {

    right: 0;

    position: absolute;

    visibility: hidden;

}

.love .block div {

    width: 40px;

    height: 40px;

    position: absolute;

    background: url("../images/heart.png") no-repeat;

    background-size: contain;

    box-sizing: border-box;

}

@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: -900px;

    position: relative;

    Z-index: 99;

}

.footer .border .border-top {

    border-top: 3px solid black;

    transform-origin: left center;

    -webkit-animation: border 312 linear;

    -o-animation: border 4s linear;

    animation: border 4s linear;

    animation-fill-mode: both;

}

footer .border .border-bottom {

    float: right;

    border-top: 3px solid red;

    transform-origin: right center;

    -webkit-animation: border 2s linear 4s;

    -o-animation: border 2s linear 4s;

    animation: border 2s linear 4s;

    animation-fill-mode: both;

}

footer .copyright {

    width: 100%;

    height: 30px;

    position: absolute;

    bottom: -30px;

    text-align: center;

}

.copyright div {

    width: 30%;

    line-height: 30px;

    display: inline-block;

}

.copyright div span {

    color: dimgray

}


js
 

const blk_pitn = {

    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]],

    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]],

    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]],

    block13: [[0, 1], [0, 0], [-1, 0], [-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]],

    block17: [[0, 1], [0, 0], [-1, 0], [0, -1]],

    block18: [[0, 1], [0, 0], [-1, 0], [-1, -1]],

    block19: [[0, -1], [0, 0], [-1, 0], [1, 0]],

    block20: [[1, -1], [0, 0], [-1, 0], [1, 0]],

    block21: [[0, 1], [0, 0], [-1, 0], [-1, -1]],

    block22: [[1, 1], [0, 0], [-1, 0], [1, 0]],

    block23: [[0, 2], [0, 0], [0, -1], [0, 1]]

}

const offset_pitn = {

    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],

}

 

surnameyao
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
520程序员前端表白代码，使用 HTML、CSS 和 JavaScript 编写一段浪漫的代码，用于表达爱意
05-16
内容概要: 这段浪漫代码是通过HTML、CSS和JavaScript编写的，通过结合这三种前端技术，我们创建了一个令人心动的情人节表白页面。包含了逐行打印文字、变色效果和玫瑰花的飘落等特效。它能够营造出浪漫的氛围，并用创意的方式表达爱意。 适用人群: 这段代码适用于希望以创意和浪漫的方式表达爱意的人群。无论是情侣还是恋人，他们可以通过这段代码给对方留下深刻的印象和甜蜜的回忆。 使用场景和目标: 这段代码适用于多种场景，包括但不限于情人节、纪念日、生日等特殊时刻。它的目标是通过特效的展示和个性化的定制，表达浓浓的爱意和感情，让接收者感受到深深的关爱和温暖。 其他说明: - 这段代码可以在任何现代的Web浏览器中运行，无需额外的插件或软件。 - 用户可以根据自己的需求对代码进行定制，例如修改文字内容、颜色、字体大小等，以实现个性化的效果。随机变换文字颜色，增加视觉吸引力、背景效果营造浪漫的夜空氛围、按钮点击播放烟花动画和背景音乐。 - 希望有机会学习和欣赏您精心制作的代码，感受到代码的魅力和浪漫的力量。 - 请注意，在某些浏览器中可能需要用户与页面进行交互才能播放烟花声音。
十款代码表白特效，一个比一个浪漫
2401_83641634的博客
03-27 1557
整理的这些资料希望对Java开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。其实面试这一块早在第一个说的25大面试专题就全都有的。以上提及的这些全部的面试+学习的各种笔记资料，我这差不多来回搞了三个多月，收集整理真的很不容易，其中还有很多自己的一些知识总结。正是因为很麻烦，所以对以上这些学习复习资料感兴趣只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频**如果你觉得这些内容对你有帮助，可以扫码领取！
跳动的爱 - 动态全屏爱心【前端版本】
最新发布
关注收藏，可以私信解决问题！
07-18 445
要使用HTML、CSS和JavaScript绘制一个全屏且较大的爱心，并且让它有动态效果，可以通过以下步骤实现：HTML: 定义基本的页面结构。CSS: 定义爱心的样式和动画效果。JavaScript: 动态调整爱心的位置和大小，使其在页面上移动。margin;display;;;;overflow;;width;height;animation;;position;content"";left;
html爱心特效代码
热门推荐
梦游星海的博客
10-26 44万+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywor...
情人节动态爱心表白代码
Patrick_bulong的博客
02-10 577
情人节动态爱心表白代码
动态爱心的js代码（情人节程序员必备）
weixin_44856221的博客
02-13 1565
动态爱心的js代码（情人节程序员必备）
【前端】爱心代码
檀越的博客
11-15 2万+
爱心代码
原生JS制作爱心表白代码
02-17
原生JavaScript制作爱心表白代码是一种常见且有趣的前端开发实践，它利用HTML、CSS和JavaScript的组合来创造出动态的视觉效果，通常在特殊场合如情人节或表白时使用。在这个项目中，我们将探讨如何利用原生JS实现...
前端+js+表白+爱心
01-11
在这个名为"前端+js+表白+爱心"的主题中，我们探讨的是如何利用这些技术制作一个浪漫的表白页面。首先，HTML（HyperText Markup Language）是网页内容的基础结构，用于定义网页的各个元素，如标题、段落、图片等。在...
HTML心形动态满屏爱心代码
02-20
HTML心形动态满屏爱心代码是一种利用HTML、CSS和JavaScript技术来创建的视觉效果，它能够在网页上展示出不断飘动的爱心，营造出浪漫和趣味的氛围。这个压缩包中包含的文件很可能是实现这一效果的具体源码，让我们...
基于JavaScript实现的程序员表白爱心代码(2套)
12-11
基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套)
爱心代码（web前端）陈飞宇李峋同款
小祥编程擅长前端
11-23 6032
爱心代码（web前端）陈飞宇李峋同款
javaScript写爱心代码
qq_48128672的博客
11-08 1984
javaScript写爱心代码
爱心代码表白（可直接复制运行）
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
11-09 3万+
爱心代码表白（可直接复制运行）
简易爱心特效代码
m0_74391978的博客
11-12 2245
爱心代码
情人节用js写一个爱心代码
weixin_42591413的博客
02-14 706
情人节快乐！你可以用 JavaScript 写一个简单的爱心代码。以下是一个示例代码，使用 HTML5 canvas 绘制一个爱心图形： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Love Heart</title> </head&gt...
前端开发——爱心代码&DOM部分学习（一）
2201_75835294的博客
12-14 1569
爱心代码（李峋代码（python），前端实现）），以及DOM部分的学习，如className元素属性改变，密码信息验证，下拉选择框
纯JavaScript实现表白代码
江月的博客
10-01 5570
首先是实现的具体代码： 效果图 下面展示代码的部分效果图，完整的效果可以复制上述的代码之后运行即就可以了。 最后，谢谢大家的支持了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值