AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【3D相册】零基础完成3D相册并配上背景音乐

2022-05-18 570
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 简介：【3D相册】零基础完成3D相册并配上背景音乐

一、前言


帮助好哥们整的一个小相册，给他写个教程帖image.png大致效果如下（动图超图片上传上限了）：image.png


二、准备工作


1、新建文件夹

如：我在D盘中新建一个 3D相册 文件夹，然后在 3D文件夹 中 新建2个文件夹：img ， main

其中：

  • img：放素材图片
  • main：放html文件

image.png

2、准备素材

素材包括以下：

  • 6张需要放到相册中的图片，放到img文件夹中
  • 1张相册背景图片，需要重名名为background.jpg,放到img文件夹中，背景图片要到python程序执行完再放入
  • 1首喜欢的音乐
对于图片的处理

我选择用python来处理。

对于音乐的处理

首先先搜索网易云网页版，找到一首自己喜欢的音乐，进入到详情页，点击生成外链播放器，复制蓝色区域代码，放到记事本，备用。image.pngimage.png


三、代码工作


1、python处理6张图片

需要安装PIL库：

pip install pillow

图片处理代码如下：

import os
from PIL import Image
def get_file(path):
    file_list = os.listdir(path)
    file_list.sort()  # 对列表内容进行排序，默认为升序
    return file_list
def image_resize(path, files):
    i = 1
    for file_name in files:
        #  待处理图片路径
        image_path = path + '/' + file_name
        img = Image.open(image_path)
        # 当处理第二张图片的时候，需要将图片旋转180°，方便相册的观看体验
        if i == 2:
            img = img.transpose(Image.ROTATE_180)
        #  resize图片大小，入口参数为一个tuple，新的图片的大小
        img_size_1 = img.resize((400, 400))
        img_size_2 = img.resize((100, 100))
        # #  处理图片后存储路径，以及存储格式
        img_size_1.save(path+'/' + str(i) + '.png')
        img_size_2.save(path+'/0' + str(i) + '.png')
        i = i+1
def main():
    path = input('请输入你想更改的文件的路径：').replace('\\', '/')
    files = get_file(path)
    image_resize(path, files)
    print("所有图片处理完毕")
if __name__ == '__main__':
    main()
1.1代码运行

首先，在img文件夹里，复制路径image.png其次，开始运行，需要将复制的内容粘贴上去，并按Enter键2a1a7dd1fc404c8e9ccb67e232685d0c.gif结果如下：image.png

1.2 放入背景图片

将背景图片放入img文件夹，并重命名为background.jpg

2、写html文件

可以先在main文件夹中，新建txt文件，然后更改后缀名，之后的弹窗点击确定即可。image.png

右键打开main.html文件，进行编辑

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D相册</title>
<style type="text/css">
  @charset "utf-8";
  *{
    margin:0;
    padding:0;
  }
  body{
    background-image: url("../img/background.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
  }
  li{
    list-style: none;
  }
  .box{
    width:200px;
    height:200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:100% 100%;
    position: absolute;
    margin-left: 42%;
    margin-top: 22%;
    -webkit-transform-style:preserve-3d;
    -webkit-transform:rotateX(13deg);
    -webkit-animation:move 5s linear infinite;
  }
  .minbox{
    width:100px;
    height:100px;
    position: absolute;
    left:50px;
    top:30px;
    -webkit-transform-style:preserve-3d;
  }
  .minbox li{
    width:100px;
    height:100px;
    position: absolute;
    left:0;
    top:0;
  }
  .minbox li:nth-child(1){
    background: url(../img/01.png) no-repeat 0 0;
    -webkit-transform:translateZ(50px);
  }
  .minbox li:nth-child(2){
    background: url(../img/02.png) no-repeat 0 0;
    -webkit-transform:rotateX(180deg) translateZ(50px);
  }
  .minbox li:nth-child(3){
    background: url(../img/03.png) no-repeat 0 0;
    -webkit-transform:rotateX(-90deg) translateZ(50px);
  }
  .minbox li:nth-child(4){
    background: url(../img/04.png) no-repeat 0 0;
    -webkit-transform:rotateX(90deg) translateZ(50px);
  }
  .minbox li:nth-child(5){
    background: url(../img/05.png) no-repeat 0 0;
    -webkit-transform:rotateY(-90deg) translateZ(50px);
  }
  .minbox li:nth-child(6){
    background: url(../img/06.png) no-repeat 0 0;
    -webkit-transform:rotateY(90deg) translateZ(50px);
  }
  .maxbox li:nth-child(1){
    background: url(../img/1.png) no-repeat 0 0;
    -webkit-transform:translateZ(50px);
  }
  .maxbox li:nth-child(2){
    background: url(../img/2.png) no-repeat 0 0;
    -webkit-transform:rotateX(180deg) translateZ(50px);
  }
  .maxbox li:nth-child(3){
    background: url(../img/3.png) no-repeat 0 0;
    -webkit-transform:rotateX(-90deg) translateZ(50px);
  }
  .maxbox li:nth-child(4){
    background: url(../img/4.png) no-repeat 0 0;
    -webkit-transform:rotateX(90deg) translateZ(50px);
  }
  .maxbox li:nth-child(5){
    background: url(../img/5.png) no-repeat 0 0;
    -webkit-transform:rotateY(-90deg) translateZ(50px);
  }
  .maxbox li:nth-child(6){
    background: url(../img/6.png) no-repeat 0 0;
    -webkit-transform:rotateY(90deg) translateZ(50px);
  }
  .maxbox{
    width: 800px;
    height: 400px;
    position: absolute;
    left: 0;
    top: -20px;
    -webkit-transform-style: preserve-3d;
  }
  .maxbox li{
    width: 200px;
    height: 200px;
    background: #fff;
    border:1px solid #ccc;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.2;
    -webkit-transition:all 1s ease;
  }
  .maxbox li:nth-child(1){
    -webkit-transform:translateZ(100px);
  }
  .maxbox li:nth-child(2){
    -webkit-transform:rotateX(180deg) translateZ(100px);
  }
  .maxbox li:nth-child(3){
    -webkit-transform:rotateX(-90deg) translateZ(100px);
  }
  .maxbox li:nth-child(4){
    -webkit-transform:rotateX(90deg) translateZ(100px);
  }
  .maxbox li:nth-child(5){
    -webkit-transform:rotateY(-90deg) translateZ(100px);
  }
  .maxbox li:nth-child(6){
    -webkit-transform:rotateY(90deg) translateZ(100px);
  }
  .box:hover ol li:nth-child(1){
    -webkit-transform:translateZ(300px);
    width: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
  }
  .box:hover ol li:nth-child(2){
    -webkit-transform:rotateX(180deg) translateZ(300px);
    width: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
  }
  .box:hover ol li:nth-child(3){
    -webkit-transform:rotateX(-90deg) translateZ(300px);
    width: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
  }
  .box:hover ol li:nth-child(4){
    -webkit-transform:rotateX(90deg) translateZ(300px);
    width: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
  }
  .box:hover ol li:nth-child(5){
    -webkit-transform:rotateY(-90deg) translateZ(300px);
    width: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
  }
  .box:hover ol li:nth-child(6){
    -webkit-transform:rotateY(90deg) translateZ(300px);
    width: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
  }
  @keyframes move{
    0%{
      -webkit-transform: rotateX(13deg) rotateY(0deg);
    }
    100%{
      -webkit-transform:rotateX(13deg) rotateY(360deg);
    }
  }
</style>
</head>
<body>
<div class="box">
  <ul class="minbox">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ol class="maxbox">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>
</div>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 
src="http://music.163.com/outchain/player?type=2&id=579954&auto=1&height=66" 
style="top:0px;position:absolute;z-index:2;left:0px"></iframe>
</body>
</html>
2.1 更换音乐素材

在代码的第213行，替换音乐的链接即可。image.png

3、运行main.htmlimage.pngimage.png


四、推荐阅读


《解决audio自动播放无效问题》

文章标签：
Python
爱打瞌睡的CV君
目录
相关文章
祈澈菇凉
|
小程序 JavaScript
小程序本地相册选择图片或相机拍照底部弹框功能
小程序本地相册选择图片或相机拍照底部弹框功能
祈澈菇凉
90 0
算精通
|
2月前
|
机器人
XGO拍照功能
【9月更文挑战第04天】
算精通
33 1
宁波阿成.
|
6月前
|
Java
手机照相或选择相册，类似新浪微博的图片处理
手机照相或选择相册，类似新浪微博的图片处理
宁波阿成.
39 2
爱编程的大李子
|
JavaScript 前端开发
3D旋转相册+背景音乐
3D旋转相册+背景音乐
爱编程的大李子
144 0
3D旋转相册+背景音乐
1016743651376594
|
Android开发
打开相机，相册，裁剪图片
打开相机，相册，裁剪图片
1016743651376594
175 0
清雨小竹
选择图片——相机与相册
选择图片——相机与相册
清雨小竹
82 0
清雨小竹
metaio拍照
metaio拍照
清雨小竹
57 0
嗯哼9925
|
JavaScript
为页面添加背景音乐
嗯哼9925
1144 0
晚来南风晚相识
|
小程序 前端开发
小程序之选择拍照或者本地相册
小程序之选择拍照或者本地相册
晚来南风晚相识
220 0
游客tpf6xsowucp6a
|
iOS开发
iOS 获取图片（拍照、相册、图库）详解
iOS 图片来源有三种方法：
游客tpf6xsowucp6a
1712 0