1. Toy模板网首页
  2. > Toy博客

HTML浪漫动态表白代码绚烂星空烟花+粉色大爱心+3D大小魔方旋转相册+音乐(附源码)（三）

10月前 作者：天下·第二 分类：Toy博客 阅读(48) 违法举报

这篇具有很好参考价值的文章主要介绍了HTML浪漫动态表白代码绚烂星空烟花+粉色大爱心+3D大小魔方旋转相册+音乐(附源码)（三）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一. 前言

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

来吧，展示！

1. 绚烂星空烟花+粉色大爱心

效果是动态的

表白代码烟花,前端,html,3d,前端

代码

关键代码修改

修改名字

<div id="child"><h4>💗you and me💗</h4></div><!--这里写名字❤！！！-->

修改背景音乐，只要把音乐地址修改即可，可与当前目录相同

<audio autoplay="autoplay" loop="loop" preload="auto" id="music" controls>
    <source src="pianai.mp3" type="audio/ogg">
    <source src="pianai.mp3" type="audio/mpeg">
</audio>

html代码

js部分代码太长了就不贴出来了，文章末尾有链接可以下载

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>❤永远开心❤</title>

    <style>
        html, body {
            margin: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #000;
        }

        #canvas {
            width: 100%;
            height: 100%;
        }

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

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

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

        }

        h4 {
            font-family: "STKaiti";
            font-size: 40px;
            color: #f584b7;
            position: relative;
        }
    </style>
</head>
<body>
<div id="child"><h4>💗you and me💗</h4></div><!--这里写名字❤！！！-->
<canvas id="pinkboard"></canvas>
...

<audio autoplay="autoplay" loop="loop" preload="auto" id="music" controls>
    <source src="daughtersLove.mp3" type="audio/ogg">
    <source src="daughtersLove.mp3" type="audio/mpeg">
</audio>
</body>
</html>

2. 绚烂星空烟花+3D旋转相册

表白代码烟花,前端,html,3d,前端

代码

关键代码修改

修改名字

<div class="title-name"><h4>💗致亲爱的X女士</h4></div><!--这里写名字❤！！！-->
<div class="title-name1"><h3>我❤喜欢你❤，请让我爱你一辈子</h3></div><!--这里写名字❤！！！-->

修改背景音乐，只要把音乐地址修改即可，可与当前目录相同

<div class="audio">
    <audio autoplay="autoplay" loop="loop" preload="auto" id="music" controls>
        <source src="../pianai.mp3" type="audio/ogg">
        <source src="../pianai.mp3" type="audio/mpeg">
    </audio>
</div>

照片替换

<!--/*外层最大容器*/-->
<div class="wrap">
    <!--    /*包裹所有元素的容器*/-->
    <div class="cube">
        <!--前面图片 -->
        <div class="out_front">
            <img src="img/150737-1620457657f28d.jpg" class="pic"/>
        </div>
        <!--后面图片 -->
        <div class="out_back">
            <img src="img/150824-16204577043623.jpg" class="pic"/>
        </div>
        <!--左图片 -->
        <div class="out_left">
            <img src="img/173640-1620466600fb9b.jpg" class="pic"/>
        </div>
        <div class="out_right">
            <img src="img/193151-162151031144dc.jpg" class="pic"/>
        </div>
        <div class="out_top">
            <img src="img/193257-16215103778919.jpg" class="pic"/>
        </div>
        <div class="out_bottom">
            <img src="img/203954-1623933594b335.jpg" class="pic"/>
        </div>
        <!--小正方体 -->
        <span class="in_front">
                <img src="img/211606-162324456621c4.jpg" class="in_pic"/>
            </span>
        <span class="in_back">
                 <img src="img/224204-1620744124ecd7.jpg" class="in_pic"/>
            </span>
        <span class="in_left">
                <img src="img/224716-16191892361adb.jpg" class="in_pic"/>
            </span>
        <span class="in_right">
                <img src="img/225658-162428741823f5.jpg" class="in_pic"/>
            </span>
        <span class="in_top">
                <img src="img/224813-1603896493456e.jpg" class="in_pic"/>
            </span>
        <span class="in_bottom">
                <img src="img/203954-1623933594b335.jpg" class="in_pic"/>
            </span>
    </div>
</div>

html代码

js/css代码太长就一起贴出来了，文章末尾有链接可以下载

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>3D表白相册</title>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<!--/*外层最大容器*/-->
<div class="wrap">
    <!--    /*包裹所有元素的容器*/-->
    <div class="cube">
        <!--前面图片 -->
        <div class="out_front">
            <img src="img/150737-1620457657f28d.jpg" class="pic"/>
        </div>
        <!--后面图片 -->
        <div class="out_back">
            <img src="img/150824-16204577043623.jpg" class="pic"/>
        </div>
        <!--左图片 -->
        <div class="out_left">
            <img src="img/173640-1620466600fb9b.jpg" class="pic"/>
        </div>
        <div class="out_right">
            <img src="img/193151-162151031144dc.jpg" class="pic"/>
        </div>
        <div class="out_top">
            <img src="img/193257-16215103778919.jpg" class="pic"/>
        </div>
        <div class="out_bottom">
            <img src="img/203954-1623933594b335.jpg" class="pic"/>
        </div>
        <!--小正方体 -->
        <span class="in_front">
                <img src="img/211606-162324456621c4.jpg" class="in_pic"/>
            </span>
        <span class="in_back">
                 <img src="img/224204-1620744124ecd7.jpg" class="in_pic"/>
            </span>
        <span class="in_left">
                <img src="img/224716-16191892361adb.jpg" class="in_pic"/>
            </span>
        <span class="in_right">
                <img src="img/225658-162428741823f5.jpg" class="in_pic"/>
            </span>
        <span class="in_top">
                <img src="img/224813-1603896493456e.jpg" class="in_pic"/>
            </span>
        <span class="in_bottom">
                <img src="img/203954-1623933594b335.jpg" class="in_pic"/>
            </span>
    </div>
</div>

<div class="title-name"><h4>💗致亲爱的X女士</h4></div><!--这里写名字❤！！！-->
<div class="title-name1"><h3>我❤喜欢你❤，请让我爱你一辈子</h3></div><!--这里写名字❤！！！-->
<div class="audio">
    <audio autoplay="autoplay" loop="loop" preload="auto" id="music" controls>
        <source src="../pianai.mp3" type="audio/ogg">
        <source src="../pianai.mp3" type="audio/mpeg">
    </audio>
</div>

<canvas id="canvas"></canvas>
...
</body>
</html>

下载链接：https://download.csdn.net/download/qq_43030934/88239636

另外附上其他的告白HTML网页版的链接：

  1. HTML浪漫动态表白代码+音乐(附源码)（一）
  2. HTML浪漫动态表白代码+音乐(附源码)（二）

希望可以帮助到你，还请不吝你的三连哦！文章来源地址https://www.toymoban.com/news/detail-713992.html

到了这里，关于HTML浪漫动态表白代码绚烂星空烟花+粉色大爱心+3D大小魔方旋转相册+音乐(附源码)（三）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • C#实现简单的心形表白代码＜这是属于程序员的浪漫！＞

    C#实现简单的心形表白代码＜这是属于程序员的浪漫！＞

    C#是微软公司发布的一种由C和C++衍生出来的面向对象的编程语言、运行于.NET Framework和.NET Core(完全开源，跨平台)之上的高级程序设计语言。并定于在微软职业开发者论坛(PDC)上登台亮相。C#是微软公司研究员Anders Hejlsberg的最新成果。C#看起来与Java有着惊人的相似;它包括了诸如

    2024年02月12日
    浏览(45)
  • C++ 实现命令行画心形代码，有多个爱心代码，简单可调数据和字符，可装X，也可用于浪漫的表白，可实现跳动、保存等功能

    C++ 实现命令行画心形代码，有多个爱心代码，简单可调数据和字符，可装X，也可用于浪漫的表白，可实现跳动、保存等功能

    绘制一个简易爱心 绘制一个精致爱心 另一个好的版本 一个最花里胡哨的 绘制红心并保存到文件 绘制跳动的心脏：注此版本只能在Windows系统下编译运行。 升级版 其他做法html 也许我们还可以再做点什么，比如加点动画，看看下面这个吧。 点这里下载源码，里面已经加了很

    2024年02月08日
    浏览(52)
  • Python浪漫星空

    Python浪漫星空

    序号 文章目录 直达链接 1 浪漫520表白代码 https://want595.blog.csdn.net/article/details/130666881 2 满屏表白代码 https://want595.blog.csdn.net/article/details/129794518 3 跳动的爱心 https://want595.blog.csdn.net/article/details/129503123 4 漂浮爱心 https://want595.blog.csdn.net/article/details/128808630 5 爱心光波 https://wa

    2024年02月08日
    浏览(42)

  • 含源码，用Python实现浪漫烟花

    目录 前言 环境准备 代码编写 效果展示 Python实现浪漫的烟花特效 现在很多地方都不能放烟花了，既然看不到， 那作为程序猿的我们还不能自己用代码做一个吗？ 今天就带大家用代码做一个烟花特效吧。 这里使用到的库有： pygame （用于游戏的编写）、random（用于产生随机

    2024年02月12日
    浏览(70)
  • HTML5 Canvas与JavaScript携手绘制动态星空背景

    HTML5 Canvas与JavaScript携手绘制动态星空背景

    目录 一、程序代码 二、代码原理 三、运行效果 这段代码通过 HTML5 的 canvas 元素和 JavaScript 实现了一个星空背景效果。首先，它在页面加载时创建了一个全屏大小的画布，并使用 JavaScript 生成了多个具有不同运动轨道的星星对象。每颗星星都具有随机的半径、位置、运动速度

    2024年02月20日
    浏览(52)
  • 新年烟花代码-html版

    新年烟花代码-html版

    2024年02月02日
    浏览(45)
  • 七夕特辑（一）浪漫表白方式 用神经网络生成一首情诗

    七夕特辑（一）浪漫表白方式 用神经网络生成一首情诗

    牛郎织女相会，七夕祝福要送来。祝福天下有情人，终成眷属永相伴。 七夕是中国传统的情人节，也是恋人们表达爱意的好时机。在这个特别的日子里，送上温馨的祝福，愿你们的爱情甜蜜如蜜，幸福美满。 爱情是生命中最美好的事物之一，而七夕则是庆祝爱情的日子。无

    2024年02月12日
    浏览(44)
  • 马上七夕到了，用各种编程语言实现10种浪漫表白方式

    马上七夕到了，用各种编程语言实现10种浪漫表白方式

    在七夕节这个充满爱意的日子里，用编程语言编写一些表白代码是个非常有趣的想法。以下是使用 各种编程语言Python、Java、JavaScript、H5等编写的 10 种简单表白代码示例，以下只是抛砖引玉，还需要你用心修改，对方一定能理解你的真心。 这段代码使用 Python 的 Matplotlib 库绘

    2024年02月12日
    浏览(36)

  • 烟花代码|html（猿如意AI源码-参数微调）

    每到 新年的时候捏，就要放烟花啦！但是放烟花太多会危害环境，所以互联网时代的电子烟花平替就代替实体烟花帮我们除旧迎新啦！今天就po一个找到滴猿如意烟花网页代码，开源滴，然后改了一些背景参数，记录一下，新年时给大家送祝福(●\\\'◡\\\'●) !DOCTYPE html html head m

    2024年02月03日
    浏览(50)
  • C/C++实现跨年表白烟花

    C/C++实现跨年表白烟花

    写在前面：本文章参考九夏老师相关代码教学：（该代码需要配置easyx） 学习这段代码可以做什么呢？过年了是吧，没和女神一起放烟花吧，大家学计算机的同学，周围都是 “程序媛” 吧，把你的代码一分享，顺便装个*是吧，哥们/姐们，有啥不会的问我（可恶，被你装到了

    2024年01月18日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包