HTML浪漫动态表白代码+音乐(附源码)

news2025/6/10 4:46:34

HTML浪漫表白求爱(附源码),内含4款浪漫的表白源码,可用于520,情人节,生日,求爱场景,下载直接使用。

直接上源码吧

一.红色爱心

1.效果

实际效果是动态的哦
在这里插入图片描述

2.源码

复制粘贴即可运行哦

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <meta name="Keywords" content="关键字,关键词">
   <meta name="Description" content="描述和简介">
   <title>Title</title>
   <style type="text/css">
       *{margin:0;padding:0;}
       body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
       a{text-decoration:none;color: inherit;}
       img{display: block;border:none;}
       ol,ul{list-style:none;}
       .clearfix:after {content: "";display: block;clear: both;}
       .fl{ float: left;}
       .fr{ float: right;}

       html{
           height: 100%;
           background: -webkit-radial-gradient(center,#153170,#000);
       }

       .heart{ position: relative; width: 300px; height: 300px; margin: 200px auto;transform: rotate(45deg);
           animation: move 2s infinite alternate ;}
       .heart div{ position: absolute; width: 200px; height: 200px; background: red;}
       .heart .middle{ right: 0; bottom: 0; width: 200px; height: 200px;}
       .heart .left{ left: 0; bottom: 0; border-radius: 50%;}
       .heart .right{ top: 0; right: 0;border-radius: 50%;}

       .heart p{ width: 200px; height: 30px; font: bold 25px/30px "";text-align:center; color: #fff;}
       .heart p{ position: absolute; right: 0; bottom: 85px; transform: rotate(-45deg);}

       @-webkit-keyframes move{
           10%{ transform: rotate(45deg) scale(1.1); text-shadow: 0 0 5px #fff; }
           20%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }
           30%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }
           40%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }
           50%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }
           60%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }
           70%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }
           80%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 10px #fff;}
           90%{ transform: rotate(45deg) scale(1.1); text-shadow: 0 0 5px #fff; }
       }
 </style>
</head>
<body>
   <div class="heart">
       <div class="left"></div>
       <div class="middle"></div>
       <div class="right"></div>
       <p>I Love You</p>
   </div>
</body>
</html>

二.粉色爱心

1.效果

实际效果是动态的哦
在这里插入图片描述

2.源码

文字部分只需改这一块即可哦

<div id="child"><h4>💗致亲爱的X女士</h4></div><!--这里写名字❤!!!-->

代码太长,只粘贴部分哦

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas爱心</title>

    <style>
        html, body {
            height: 100%;
            padding: 0;
            margin: 0;
            background: #000;
        }

        canvas {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        #child {
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -75px;
            margin-left: -100px;

        }

        h4 {
            font-family: "STKaiti";
            font-size: 40px;
            color: #f584b7;
            position: relative;
            top: -70px;
            left: -65px;
        }
    </style>
</head>
<body>
<div id="child"><h4>💗致亲爱的X女士</h4></div><!--这里写名字❤!!!-->
<canvas id="pinkboard"></canvas>

三.粉色爱心+科技流动文字

1.效果

实际效果是动态的哦
在这里插入图片描述

2.源码

文字部分只需改这一块即可哦

<div id="child"><h4>💗致亲爱的X女士</h4></div><!--这里写名字❤!!!-->

代码太长,只粘贴部分哦

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
    <title>Love~L</title>
</head>
<body>
<canvas id="canvas"></canvas>
<style type="text/css">
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
</style>
<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');


    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;

    var texts = 'I LOVE U'.split('');

    var fontSize = 16;
    var columns = canvas.width / fontSize;
    // 用于计算输出文字时坐标,所以长度即为列数
    var drops = [];
    //初始值
    for (var x = 0; x < columns; x++) {
        drops[x] = 1;
    }

    function draw() {
        //让背景逐渐由透明到不透明
        ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        //文字颜色
        ctx.fillStyle = '#f584b7';
        ctx.font = fontSize + 'px arial';
        //逐行输出文字
        for (var i = 0; i < drops.length; i++) {
            var text = texts[Math.floor(Math.random() * texts.length)];
            ctx.fillText(text, i * fontSize, drops[i] * fontSize);

            if (drops[i] * fontSize > canvas.height || Math.random() > 0.95) {
                drops[i] = 0;
            }

            drops[i]++;
        }
    }

    setInterval(draw, 33);
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
    <TITLE> love</TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <meta charset="UTF-8">
    <style>
        html, body {
            height: 100%;
            padding: 0;
            margin: 0;
            background: rgb(0, 0, 0);
        }

        canvas {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        #child {
            position: absolute;
            left: 50%;
            top: 48%;
            transform: translate(-50%, -50%);

        }

        h4 {
            font-family: "STKaiti";
            font-size: 40px;
            color: #f584b7;
            position: relative;
        }
    </style>
</head>
<body>

四.粉色爱心+科技流动文字

1.效果

实际效果是动态的哦
在这里插入图片描述

2.源码

复制粘贴即可运行哦

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>情人节爱心背景</title>

    <style>
        body {
            overflow: hidden;
            margin: 0;
        }

        h1 {
            position: fixed;
            top: 40%;
            left: 0;
            width: 100%;
            text-align: center;
            transform: translateY(-50%);
            font-family: 'Love Ya Like A Sister', cursive;
            font-size: 40px;
            color: #c70012;
            padding: 0 20px;
        }

        @media (min-width: 1200px) {
            h1 {
                font-size: 100px;
            }
        }
    </style>

</head>
<body>

<canvas></canvas>
<h1>情人节快乐!</h1>

<script>
    var canvas = document.querySelector("canvas"),
        ctx = canvas.getContext("2d");

    var ww, wh;

    function onResize() {
        ww = canvas.width = window.innerWidth;
        wh = canvas.height = window.innerHeight;
    }

    ctx.strokeStyle = "red";
    ctx.shadowBlur = 25;
    ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";

    var precision = 100;
    var hearts = [];
    var mouseMoved = false;

    function onMove(e) {
        mouseMoved = true;
        if (e.type === "touchmove") {
            hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
            hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
        } else {
            hearts.push(new Heart(e.clientX, e.clientY));
            hearts.push(new Heart(e.clientX, e.clientY));
        }
    }

    var Heart = function (x, y) {
        this.x = x || Math.random() * ww;
        this.y = y || Math.random() * wh;
        this.size = Math.random() * 2 + 1;
        this.shadowBlur = Math.random() * 10;
        this.speedX = (Math.random() + 0.2 - 0.6) * 8;
        this.speedY = (Math.random() + 0.2 - 0.6) * 8;
        this.speedSize = Math.random() * 0.05 + 0.01;
        this.opacity = 1;
        this.vertices = [];
        for (var i = 0; i < precision; i++) {
            var step = (i / precision - 0.5) * (Math.PI * 2);
            var vector = {
                x: (15 * Math.pow(Math.sin(step), 3)),
                y: -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))
            }
            this.vertices.push(vector);
        }
    }

    Heart.prototype.draw = function () {
        this.size -= this.speedSize;
        this.x += this.speedX;
        this.y += this.speedY;
        ctx.save();
        ctx.translate(-1000, this.y);
        ctx.scale(this.size, this.size);
        ctx.beginPath();
        for (var i = 0; i < precision; i++) {
            var vector = this.vertices[i];
            ctx.lineTo(vector.x, vector.y);
        }
        ctx.globalAlpha = this.size;
        ctx.shadowBlur = Math.round((3 - this.size) * 10);
        ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
        ctx.shadowOffsetX = this.x + 1000;
        ctx.globalCompositeOperation = "screen"
        ctx.closePath();
        ctx.fill()
        ctx.restore();
    };


    function render(a) {
        requestAnimationFrame(render);

        hearts.push(new Heart())
        ctx.clearRect(0, 0, ww, wh);
        for (var i = 0; i < hearts.length; i++) {
            hearts[i].draw();
            if (hearts[i].size <= 0) {
                hearts.splice(i, 1);
                i--;
            }
        }
    }


    onResize();
    window.addEventListener("mousemove", onMove);
    window.addEventListener("touchmove", onMove);
    window.addEventListener("resize", onResize);
    requestAnimationFrame(render);
</script>

</body>
</html>

完整的源码下载链接:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/334114.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JVM 线程本地分配缓存TLAB

什么是TLAB 从内存模型而不是垃圾收集的角度&#xff0c;对 Eden 区域继续进行划分&#xff0c;JVM 为每个线程分配了一个私有缓存区域&#xff0c;它包含在 Eden 空间内 多线程同时分配内存时&#xff0c;使用 TLAB 可以避免一系列的非线程安全问题&#xff0c;同时还能提升…

一文读懂CXL协议

2001年&#xff0c;英特尔公布了第三代I/O技术——3GIO技术&#xff08;后更名为PCI Express&#xff0c;即PCIe&#xff09;&#xff0c;以高性能、高扩展性、高可靠性及出色的兼容性取代了包括AGP和PCI在内所有的内部总线并且不断升格。例如&#xff0c;2019年5月底公布的PCI…

JUC锁与AQS技术【我的Android开发技术】

JUC锁与AQS技术【我的Android开发技术】 AQS原理 AQS就是一个同步器&#xff0c;要做的事情就相当于一个锁&#xff0c;所以就会有两个动作&#xff1a;一个是获取&#xff0c;一个是释放。获取释放的时候该有一个东西来记住他是被用还是没被用&#xff0c;这个东西就是一个状…

六、Linux文件 - lseek函数

目录 1.lseek函数 2.lseek函数实战 2.1宏SEEK_CUR的用法 2.2宏SEEK_END的用法 3.Open函数实战 - O_APPEND的用法 4.Linux在库函数中寻找相应的宏定义 1.lseek函数 off_t lseek(int fd,off_t offset,int whence);光标的偏移量 fd:文件描述符offset:偏移量whence: SEEK_…

macOS中虚拟机桥接模式分配静态ip

1.首先使用dhclient命令&#xff0c;在局域网中分配一个C类地址。 2.获得地址后&#xff0c;输入ifconfig&#xff0c;查看分配的地址。 3.然后编辑vi /etc/sysconfig/network-scripts/ifcfg-en***文件 在该配置文件中编辑&#xff0c;设置ONBOOTyes&#xff0c;而后添加静态配…

分享5款安全无毒,下载简单的小软件

今天推荐一些安全无毒&#xff0c;下载简单&#xff0c;最重要的是没有广告的软件&#xff01; 1.文件备份传输——MultiPar MultiPar是一款奇偶校验文件工具&#xff08;Parchive tool&#xff09;&#xff0c;用来为文件、文件夹创建校验块&#xff0c;当文件损坏时&#xf…

客户端SDK测试是什么?如何测?(附真实项目经历)

客户端SDK测试是什么&#xff1f;如何测&#xff1f; 目录&#xff1a;导读 SDK是什么 测什么&#xff1f; 功能怎么测 接下来为大家讲述一番我的真实案例 1、做了些什么 2、做的方法 3、做得好的&#xff1a; 4、做得不好的&#xff1a; 5、个人成长&#xff1a; 6、…

产品设计方法论之基础

1、信息控件 输入框限制 输入文本的内容限制。常见的内容限制主要纯字母 (如英文有纯数字 (如手机号码)、名)、纯汉字(如中文名) &#xff0c;以及各种类型的排列组合或违禁内容的输入限制。如果用户输入限制的内容&#xff0c;我们可以按无法输入的逻辑处理&#xff0c;也可以…

LeetCode题解 动态规划(三):343 整数拆分;96 不同的二叉搜索树

343 整数拆分 medium 给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0c;并使这些整数的乘积最大化。 返回 你可以获得的最大乘积 。 这道题乍一看没有点儿动态规划的影子&#xff0c;反而感觉用数学法可以求解。 但是…

后勤管理系统—服务台管理功能

数图互通是一家IT类技术型软件科技公司&#xff0c;专业的不动产、工作场所、空间、固定资产、设备家具、设施运维及可持续性管理解决方案软件供应商。 一、后勤管理系统服务台管理功能包含&#xff1a; 1、专业自动化、集中管理的自助服务助理&#xff0c;随时响应服务请求。…

作为公司,这个5款在线软件工具赶紧安利起来!

2023年了 &#xff0c;您的企业还没使用在线软件工具吗&#xff1f;自从用了在线工具之后&#xff0c;感觉打开了新办公世界的大门&#xff0c;效率蹭蹭蹭地往上涨啊。对于喜欢追求效率和便捷的我来说&#xff0c;在线实在是太棒了&#xff01;今天安利几个非常不错的在线软件工…

基于matlab使用神经网络清除海杂波

一、前言此示例演示如何使用深度学习工具箱™训练和评估卷积神经网络&#xff0c;以消除海上雷达 PPI 图像中的杂波返回。深度学习工具箱提供了一个框架&#xff0c;用于设计和实现具有算法、预训练模型和应用程序的深度神经网络。二、数据集该数据集包含 84 对合成雷达图像。每…

智能工厂自动化设备如何将数据采集到物联网云平台上

制造业工厂在进行生产管理、数字化转型升级的过程中&#xff0c;大量自动化设备的数据采集上云一直是困扰厂商的难题之一。因设备种类多、工艺复杂、设备老旧无多余通信接口导致数据无法集中、工艺无法实时管控&#xff0c;加上设备服务商的本地支持比较有限&#xff0c;因此设…

react-jwchat

react-jwchat: react-jwchat是一个基于React实现的web聊天组件。 如何阅读大型前端开源项目的源码 - 掘金 rollup专注以ESModule打包/自动treeshaking,更准确的来说rollup是小而美的打包工具 ts“typescript” ts是js类型的超集&#xff0c;被编译成纯js再执行 js&#xff…

阳康后是否二次感染,长新冠与肠道菌群的关联,多种潜在的干预措施

谷禾健康 随着大家陆续“阳康”&#xff0c;大家逐渐恢复以往的生活&#xff0c;城市的烟火气回来了。 然而阳康后真的万事大吉了吗&#xff1f; 还是有很多朋友处于这样的状态&#xff1a;感觉恢复了&#xff0c;又好像没有完全恢复&#xff0c;身体多少有点不适&#xff0c;开…

VirtualBox 虚拟机安装Windows10,珍藏版!!!

1、virtualbox管理器开始运行&#xff0c;点击【新建】按钮&#xff0c;开始新建虚拟电脑&#xff08;输入名称&#xff0c;修改路径&#xff0c;勾选版本等&#xff09;&#xff0c;如下图&#xff1b; 2、下一步&#xff0c;选择内存大小&#xff0c;默认推荐2048MB 3、创建后…

java基本类型转换

1.什么是类型转换&#xff1f; 因为java是一门强类型语言&#xff0c;所以在数据运算中会存在类型转换。 基本类型转换分为自动转换和强制转换。 自动转换规则&#xff1a;容量小的数据类型可以自动转换成容量大的数据类型&#xff0c;也可以说低级自动向高级转换。这儿的容量…

使用logstash把mysql同步到es,Kibana可视化查看

1&#xff1a;首先需要电脑本地有es环境&#xff0c;并且要牢记版本后&#xff0c;后续安装的logstash和Kibana一定要版本对应 查看es版本&#xff1a;http://localhost:9200/ 2&#xff1a;安装对应版本的logstash&#xff1a;找到自己对应ES版本&#xff0c;然后解压 Logst…

聚观早报 |微软正式将ChatGPT引入必应;百度将于3月上线ChatGPT

今日要闻&#xff1a;微软正式将ChatGPT引入必应&#xff1b;抖音否认3月全国上线外卖服务&#xff1b;百度将于3月上线ChatGPT产品&#xff1b;印尼跃升成全球第二大钴生产国&#xff1b;特斯拉在德国喜获“开年红” 微软正式将ChatGPT引入必应 2 月 8 日&#xff0c;据 CNET …

低代码开发平台|生产管理-成本核算搭建指南

1、简介1.1、案例简介本文将介绍&#xff0c;如何搭建生产管理-成本核算。1.2、应用场景计算主生产及子生产计划的工序成本、领料成本&#xff0c;统计出总的生产成本金额。2、设置方法2.1、表单搭建1&#xff09;新建表单【商品信息】&#xff0c;字段设置如下&#xff1b;名称…