2022年圣诞节祝愿 | 源码汇总 | 10套精美模板

相关阅读

其他模板

模板一

图片[1]-2022年圣诞节祝愿 | 源码汇总 | 10套精美模板-FancyPig's blog
点击查看动图

index.html

修改网页标题,第7行

    <title>猪猪 ♥ 圣诞节快乐</title>

修改选择的音乐,第109行

    <div id="overlay">
        <ul>
            <li class="title">请选择BGM</li>
            <li>
                <button class="btn" id="btnA" type="button">
                    Last Christmas
                </button>
            </li>
            <li><button class="btn" id="btnB" type="button">All I Want for Christmas Is You</button></li>
            <li><button class="btn" id="btnC" type="button">Jingle Bells</button></li>
            <li><button class="btn" id="btnD" type="button">圣诞</button></li>
            <li class="separator">或者</li>
            <li>
                <input type="file" id="upload" hidden />
                <label for="upload">上传自定义BGM</label>
            </li>
        </ul>
    </div>

以及默认预置的音乐地址,第242行

        function loadAudio(i) {
            document.getElementById("overlay").innerHTML =
                '<div class="text-loading">正在处理,请稍等...</div>';
            const files = [
                "https://v.iculture.cc/Last%20Christmas.m4a",
                "https://v.iculture.cc/All%20I%20Want%20for%20Christmas%20Is%20You.m4a",
                "https://v.iculture.cc/Jingle%20Bells.m4a",
                "https://v.iculture.cc/%E5%9C%A3%E8%AF%9E.m4a"];
 
            const file = files[i];
 
            const loader = new THREE.AudioLoader();
            loader.load(file, function (buffer) {
                audio.setBuffer(buffer);
                audio.play();
                analyser = new THREE.AudioAnalyser(audio, fftSize);
                init();
            });
 
 
 
 
        }

模板二

图片[2]-2022年圣诞节祝愿 | 源码汇总 | 10套精美模板-FancyPig's blog
点击查看动图

index.html

修改标题,第7行

    <title>猪猪 ♥ 圣诞快乐</title>

修改页面中的祝福词,第27行

        <span>猪猪 ♥ 圣诞快乐</span>

模板三

图片[3]-2022年圣诞节祝愿 | 源码汇总 | 10套精美模板-FancyPig's blog
点击查看动图

index.html

您可以修改标题,代码第8行

    <title>猪猪 ♥ 圣诞快乐</title>

拆开信封的提示词,第1070行

            <h1 style="text-align: center;color:#de2f32">拆开你的圣诞信封</h1>

信件内容,第1074行

    <div class="message">
        <h1>祝你圣诞快乐</h1>
        <h2>永远爱你的猪猪♥</h2>
    </div>

模板四

图片[4]-2022年圣诞节祝愿 | 源码汇总 | 10套精美模板-FancyPig's blog
点击查看动图

本模板包含四套模板,首页其实是一个入口,然后分别调用的one、two、three、four文件夹的四个模板,请按需修改

模板五

图片[5]-2022年圣诞节祝愿 | 源码汇总 | 10套精美模板-FancyPig's blog
点击查看动图

index.html

修改标题,第12行

    <title>2022 圣诞快乐 | 猪猪 ♥</title>

第27行,可以自定义2个外部链接,譬如跳转自己的博客,或者其他页面

            <a class="christmas-message" href="https://www.iculture.cc/" target="_blank"></a>
            <a class="stable" href="https://www.iculture.cc/qun" target="_blank"></a>

底部文字,第31行

        <div class="close">
            <div class="from">from</div>
            <a class="link" id="appellation" href="https://www.iculture.cc">FancyPig</a>
        </div>

如果你还想修改头部的提示词,您可以在js/index.js文件中第166行修改

let addLocationAndTime = function(){
	$.getJSON("https://ipapi.co/json", function(data){
		const placeString = [data.city, data.region, data.country_name].join(", ");

		timeZone = data.timezone;
		const languageString = data.languages;
		language = languageString.split(",")[0];
		const timeString = getTimeString(language, timeZone);

		const placeTimeAndGreetingString = "<div class='place-and-time'>现在是<span id='time'>" + timeString +"</span> 在 <span id='place'>" + placeString + "</span></div><div class='greeting'>希望你无论在哪里,圣诞都要快乐</div>";
		$(".place-time-and-greeting").html(placeTimeAndGreetingString);
	});
}

模板六

图片[6]-2022年圣诞节祝愿 | 源码汇总 | 10套精美模板-FancyPig's blog
点击查看动图

index.html

第7行,修改标题

    <title>2022圣诞快乐 | 猪猪 ♥ 模板</title>

第14行,修改自定义圣诞祝福

      <div class="content">
        <h1>圣诞节快乐</h1>
        <h2>
          愿你的圣诞节,分分秒秒,都是欢乐时光,尽享美酒佳肴
        </h2>
      </div>

模板七

图片[7]-2022年圣诞节祝愿 | 源码汇总 | 10套精美模板-FancyPig's blog
点击查看动图

index.html

第9行,修改标题

  <title>2022圣诞 | 给猪猪的礼物</title>

第145行,修改祝福文案

        <div id="typed-strings">
            <p> 情意绵绵,喜乐常。事事如意,人安康。风花雪月,圣诞至。祝福千万,表衷肠。家和兴旺,亲人吉祥,事业中天,学业辉煌。圣诞节快乐!</p>
        </div>

模板八

图片[8]-2022年圣诞节祝愿 | 源码汇总 | 10套精美模板-FancyPig's blog
点击查看动图

index.html

代码第5行,修改标题

  <title>猪猪2022 ♥ 圣诞快乐</title>

代码第50行,修改BGM

    <audio id="myMusic" src="https://v.iculture.cc/We%20Wish%20You%20a%20Merry%20Christmas.m4a" loop=""></audio>

模板九

图片[9]-2022年圣诞节祝愿 | 源码汇总 | 10套精美模板-FancyPig's blog
点击查看动图

代码第7行,修改标题

    <title>2022圣诞快乐 ♥ 猪猪</title>

模板十

图片[10]-2022年圣诞节祝愿 | 源码汇总 | 10套精美模板-FancyPig's blog
点击查看动图

index.html

代码第8行,修改标题

    <title>猪猪圣诞 | 2022 Merry Christmas</title>

代码第16行,修改音乐

    <!-- 音乐播放器 (这里替换音乐) -->
    <audio class="xf_music" src="Jingle.mp3" autoplay="autoplay" loop="loop" controls="controls"></audio>

代码第83行,修改右侧视频

                <!-- 这里替换视频 -->
                <source src="Christmas-Animation.mp4" type="video/mp4">

左侧图片请进入img文件夹修改,按0001.webp到0040.webp命名

图片[11]-2022年圣诞节祝愿 | 源码汇总 | 10套精美模板-FancyPig's blog

其他

您如果想快速部署到服务器上,可以使用七牛云或者阿里云,创建存储桶,然后把解压缩的文件直接上传即可,然后获取链接就可以直接分享给好友,完全无需搭建服务器!

© 版权声明
THE END
喜欢就支持一下吧
点赞10赞赏 分享
评论 共9条

请登录后发表评论