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

一. 前言

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

来吧,展示!

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

效果是动态的

drawImage

代码

关键代码修改

修改名字

<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旋转相册

在这里插入图片描述

代码

关键代码修改

修改名字

<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浪漫动态表白代码+音乐(附源码)(二)

希望可以帮助到你,还请不吝你的三连哦!


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部