国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

HTML浪漫動態(tài)表白代碼絢爛星空煙花+粉色大愛心+3D大小魔方旋轉(zhuǎn)相冊+音樂(附源碼)（三）

2年前作者：天下·第二分類：Toy博客閱讀(26)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了HTML浪漫動態(tài)表白代碼絢爛星空煙花+粉色大愛心+3D大小魔方旋轉(zhuǎn)相冊+音樂(附源碼)（三）。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

一. 前言

七夕馬上就要到了，為了幫助大家高效表白，下面再給大家加幾款實(shí)用的HTML浪漫表白代碼(附源碼)+背景音樂，可用于520，情人節(jié)，生日，求愛表白等場景，可直接使用。

來吧，展示！

1. 絢爛星空煙花+粉色大愛心

效果是動態(tài)的

表白代碼煙花,前端,html,3d,前端

代碼

關(guān)鍵代碼修改

修改名字

<div id="child"><h4>??you and me??</h4></div><!--這里寫名字??。。?->

修改背景音樂，只要把音樂地址修改即可，可與當(dāng)前目錄相同

<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>?永遠(yuǎn)開心?</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旋轉(zhuǎn)相冊

表白代碼煙花,前端,html,3d,前端

代碼

關(guān)鍵代碼修改

修改名字

<div class="title-name"><h4>??致親愛的X女士</h4></div><!--這里寫名字?！??！-->
<div class="title-name1"><h3>我?喜歡你?，請讓我愛你一輩子</h3></div><!--這里寫名字?！??！-->

修改背景音樂，只要把音樂地址修改即可，可與當(dāng)前目錄相同

<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網(wǎng)頁版的鏈接：

  1. HTML浪漫動態(tài)表白代碼+音樂(附源碼)（一）
  2. HTML浪漫動態(tài)表白代碼+音樂(附源碼)（二）

希望可以幫助到你，還請不吝你的三連哦！文章來源地址http://www.zghlxwxcb.cn/news/detail-713992.html

到了這里，關(guān)于HTML浪漫動態(tài)表白代碼絢爛星空煙花+粉色大愛心+3D大小魔方旋轉(zhuǎn)相冊+音樂(附源碼)（三）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包