《520七夕情人节表白礼物》❤520表白星空漫漫3D相册❤(HTML+CSS+JavaScript)

最新推荐文章于 2022-09-24 15:17:06 发布

置顶 @码出未来-web网页设计

最新推荐文章于 2022-09-24 15:17:06 发布

阅读量4k

点赞数 25

分类专栏： 3D相册程序员告白七夕情人节文章标签：七夕情人节表白网页制作html 520情人节告白网页源码 3D旋转木马相册 html表白网页程序员表白网页html

本文链接：https://blog.csdn.net/ruan365392777/article/details/119444546

版权

程序员告白同时被 3 个专栏收录

26 篇文章 8 订阅

订阅专栏

3D相册

18 篇文章 4 订阅

订阅专栏

七夕情人节

17 篇文章 7 订阅

订阅专栏

《520七夕情人节表白礼物》：虚幻浪漫的爱情故事——❤520星空漫漫3D相册❤(HTML+CSS+JavaScript)

520七夕节告白,也就是中国的情人节,你除了送花你还会什么？？快来制作高端大气上档次的表白网页吧

尽管没有深情的告白，也没有诚挚的诺言，但在顺其自然中我们就成为了彼此的唯一。余生漫漫，我愿与你风雨中执手，平淡中偕老。

表白作品介绍

1.网页作品简介方面 ：520❤七夕情人节❤告白网页HTML ,喜欢的可以下载，文章页支持手机PC响应式布局。可直接替换相片就能用噢!

2.网页作品编辑方面：此作品为七夕情人节告白网页设计题材，代码华丽炫酷 HTML+CSS+JavaScript 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

3.网页作品技术方面：使用CSS制作了炫酷星星闪动亮点、鼠标可拖拽图片滑动效果、同时使用JavaScript自动切换背景图片多渐变颜色效果 (可自定义更换)、HTML添加了背景音乐(可自定义更换),。

文章目录

《520七夕情人节表白礼物》：虚幻浪漫的爱情故事——❤520星空漫漫3D相册❤(HTML+CSS+JavaScript)
表白作品介绍
一、作品演示
二、代码目录
三、代码实现 (教程)
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多告白源码

一、作品演示

1.PC端电脑端(演示)

>>>点击进入>>>100款❤表白源码演示地址

在这里插入图片描述

2.H5手机端(演示)

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现 (教程)

1.这个单页面源码，是一位程序员精心为女朋友而制作的，有需要的朋友就可以修改下源码就可以送给心爱的她一个不一样的虚拟礼物了。

2.整个布局很不错，手机端和电脑端显示都很好，我也很喜欢，添加了背景音乐 / 自动切换虚幻背景 / 自动轮播相册 / 视频播放等，背景音乐也可以弄成你想说的话，或者自己唱的歌。这样也是很不错的。

html星空背景(部分)

音乐替换:如需更换mp3背景音乐,可自行下载后并找到mp3 文件夹更换即可~ 戳我>>>免费下载MP3
注意: 下载后的音乐文件需要修改名称和mp3文件夹里的 520.mp3 的名字保持一致即可

    <audio controls autoplay>
    <!-- 音乐播放 -->
        <source src="mp3/Approaching%20Nirvana%20-%20You.mp3">
    </audio>
    
      <!-- 星空背景S -->
    <div style="position:fixed;width: 100%;height:100%;top:0;">
        <div id="background" class="wall"></div>
        <div id="midground" class="wall"></div>
        <div id="foreground" class="wall"></div>
        <div id="top" class="wall"></div>
    </div>
    <!-- 星空背景E -->

html 3D相册(部分)

制作教程: 准备6-10张相片效果最好
相册替换: 找到 img 文件夹替换相片即可
注意: 相片后缀为.jpg
在这里插入图片描述

    <!-- 3D旋转相册 -->
    <div id="drag-container">
        <div id="spin-container">
            <!-- 相片  可以放多张 6-10张合适-->
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
            <img src="img/5.jpg" alt="">
            <img src="img/6.jpg" alt="">
            <img src="img/7.jpg" alt="">
            <img src="img/8.jpg" alt="">
            <img src="img/9.jpg" alt="">
            <img src="img/10.jpg" alt="">
            <!-- 可放外链图片 -->
            <!-- <a target="_blank" href="img/pexels-photo-139829.jpeg">
      <img src="img/pexels-photo-139829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
    </a> -->
            <!-- 告白视频 -->
            <!-- <video controls autoplay="autoplay" loop>
      <source src="https://blz-videos.nosdn.127.net/1/OverWatch/OVR_D.VA_SHOOTING_STAR_zhCN_YT_PC_3.mp4?s=338c48ac2dfcb1d4c0689968b5baf94eee6ca0c1&profile_id=165&oauth2_token_id=57447761" type="video/mp4">
    </video> -->

            <!-- 告白文字-->
            <p>520-❤-小倩</p>
        </div>
        <div id="ground"></div>
    </div>

css 星空(部分)

这段代码 background: url("../bgimg/bg8.jpg") no-repeat; 为第一次显示的背景图可自行更换
更换教程:需要找到bgimg文件夹下的背景图, 或者添加你想要的背景图片会即可

html,
body {
  margin: 0;
  padding: 0;
}
audio {
  position: absolute;
  bottom: 0;
  opacity: 0.1;
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -ms-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
}

div#background {
  background: url("../bgimg/bg8.jpg") no-repeat;
  -webkit-animation: dd 100s linear infinite;
  -moz-animation: dd 100s linear infinite;
  -o-animation: dd 100s linear infinite;
  animation: dd 100s linear infinite;
}

div#midground {
  background: url("../bgimg/midground.png");
  z-index: 1;
  -webkit-animation: cc 100s linear infinite;
  -moz-animation: cc 100s linear infinite;
  -o-animation: cc 100s linear infinite;
  animation: cc 100s linear infinite;
}

div#foreground {
  background: url("../bgimg/foreground.png");
  -webkit-animation: cc 153s linear infinite;
  -o-animation: cc 153s linear infinite;
  -moz-animation: cc 153s linear infinite;
  animation: cc 153s linear infinite;
}

@-webkit-keyframes cc {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 600% 0;
  }
}

@-o-keyframes cc {
  from {
    background-position: 0 0;
    transform: translateY(105px);
  }
  to {
    background-position: 600% 0;
  }
}

Javascript 自动切换背景图(部分)

自动切换背景时间:默认为600, 也就是6毫秒如需修改时间将600修改成1000 也就是1秒 2000 就是2秒....


num = 10;
$(function() {
  let count = 0
  setInterval(function() {
      if (num < 100) {
          num += 10;
          numT = num + '%';
      } else {
          num = -10;
          /* 背景切换 */
          if (count < 2) {
              count++;
          } else if (count >= 2&&count < 4) {
            /* 背景图 */
            $('div').find('#background').css('background', 'url(bgimg/bg1.jpg) no-repeat');
            count++;
    }
    else if (count >= 4&&count < 6) {
            /* 背景图 */
            count++;
            $('div').find('#background').css('background', 'url(bgimg/bg2.jpg) no-repeat');
    }
    else if (count >= 6&&count< 8) {
            /* 背景图 */
            count++;
            $('div').find('#background').css('background', 'url(bgimg/bg3.jpg) no-repeat');
    }
    else if (count >= 8) {
            /* 背景图 */
        count = 0;
            $('div').find('#background').css('background', 'url(bgimg/bg4.jpg) no-repeat');
    }

      }
  }, 600);
})