devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备_3d效果 源码表白墙

作者：IT小白 | 2024-02-16 04:47:37

赞

踩

3d效果 源码表白墙

❉ 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备

一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码html+css+javascript 如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！

❉ 文章目录

❉ 3D相册演示(含背景音乐)可自定义12张相片

在线演示地址

1. PC(电脑端)演示

在这里插入图片描述

2. H5(手机端)演示

在这里插入图片描述

3. 相片球

在这里插入图片描述

4. 照片墙

在这里插入图片描述

5. 旋转相册

在这里插入图片描述

6. 排序相册

在这里插入图片描述

❉ 代码文件目录

在这里插入图片描述

一、3D相册(代码实现)

html (3D相册部分)

<!--
 * @Author: your name
 * @Date: 2021-06-11 11:16:48
 * @LastEditTime: 2021-06-11 11:18:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \06\index.html
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <link type="text/css" rel="stylesheet" href="static/css/style.css" />
    <link type="text/css" rel="stylesheet" href="static/css/animate.min.css" />
    <link
      type="text/css"
      rel="stylesheet"
      href="static/css/audioAutoPlay.css"
    />
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/three.js"></script>
    <script src="static/js/tween.min.js"></script>
    <script src="static/js/trackballcontrols.js"></script>
    <script src="static/js/css3drenderer.js"></script>
    <title>xxx,我爱你</title>
  </head>

  <body>
    <img
      id="music_ico"
      onclick="clickMusic()"
      src="static/image/music_ico.png"
      alt=""
    />
    <audio
      id="audio"
      style="display: none"
      src="static/music/bg_music.mp3"
      preload="auto"
      loop="loop"
    ></audio>
    <div id="container"></div>
    <div id="menu">
      <button id="table">照片墙</button>
      <button id="sphere">照片球</button>
      <button id="helix">螺旋照片</button>
      <button id="grid">整齐排列</button>
    </div>

    <div class="show_info animated" style="display: none">
      <div class="info_my">
        <img
          id="showImg"
          style="width: 50px; height: 65px"
          src="./static/picture/ava2.jpg"
        />
        <div class="info_mem">
          <div class="nickname">xxx</div>
          <div class="id">身份：xxxxxxxxxxxxxx</div>
          <div class="vote">性别：女</div>
        </div>
      </div>
      <div class="intro">风筝有风，海豚有海，你还有我 
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/90841
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。