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

原创 于 2022-04-26 13:46:34 发布 · 4.6k 阅读 · 71 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#python #html #3D #相册

本文档详述了一个使用Python处理图片并结合HTML制作3D相册的过程。首先，新建文件夹并准备图片素材，然后通过Python代码调整图片尺寸和旋转角度。接着，编写HTML文件，插入音乐链接，并设置CSS样式实现3D翻转效果。最后，运行HTML文件即可查看完成的3D相册。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

一、前言

帮助好哥们整的一个小相册，给他写个教程帖
在这里插入图片描述
大致效果如下（动图超图片上传上限了）：
在这里插入图片描述

二、准备工作

1、新建文件夹

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

其中：

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

在这里插入图片描述

2、准备素材

素材包括以下：

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

我选择用python来处理。

对于音乐的处理

首先先搜索网易云网页版，找到一首自己喜欢的音乐，进入到详情页，点击生成外链播放器，复制蓝色区域代码，放到记事本，备用。
在这里插入图片描述
在这里插入图片描述

三、代码工作

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文件夹里，复制路径
在这里插入图片描述

其次，开始运行，需要将复制的内容粘贴上去，并按Enter键
在这里插入图片描述
结果如下：
在这里插入图片描述

1.2 放入背景图片

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

2、写html文件

可以先在main文件夹中，新建txt文件，然后更改后缀名，之后的弹窗点击确定即可。
在这里插入图片描述
右键打开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行，替换音乐的链接即可。
在这里插入图片描述

3、运行main.html

在这里插入图片描述
在这里插入图片描述

四、推荐阅读

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

CSS3 3D相册
李牙刷儿的专栏
12-18 1909
今天来做一个基于CSS3 3D属性的3D相册效果
3d相册
water_java的博客
06-14 548
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>3d相册</title> </head> <style> #box1 { /* 宽 */ width: 300px; /* 高 */ height: 300px; /* 边框 */ border: 1px solid black;
3D相册.html
10-24
3D相册.html
css3 3D相册
想飞的猪的博客
09-27 744
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;旋转相册&lt;/title&gt; &lt;style type="text/css"&gt;
3D旋转相册搭配背景音乐展示
最新发布
06-18
借助:hover伪类，当鼠标悬停在相册上时，图片可以自动旋转。示例CSS代码如下： 背景音乐的播放控制可以通过JavaScript实现，例如控制音量、暂停和播放等功能。示例代码如下： 在“六一送学妹”项目中，我们可以选择...
背景音乐源码_音乐源码_音乐相册源码_3d相册_
10-02
【标题】"背景音乐源码_音乐源码_音乐相册源码_3d相册_"涉及的关键技术点主要包括音乐播放、3D图形渲染以及源码开发，这是一套用于创建具有3D效果的音乐相册的应用程序源码。下面将详细解释这些技术及其在项目中的...
3D旋转相册,并配有背景音乐.
06-02
在本项目中，我们主要探讨如何使用HTML5和CSS技术创建一个3D旋转相册，并为其添加背景音乐，以打造一个具有节日氛围的互动体验，例如适用于六一儿童节这样的场合。HTML5和CSS是现代网页开发的核心技术，它们允许...
JS 3D相册旋转木马网页特效、3D动画、3D相册旋转木马
02-27
JS 3D相册旋转木马网页特效、3D动画、3D相册旋转木马 ...JS 3D相册旋转木马网页特效是一款炫酷的3D相册旋转木马网页特效，除了图片相册、增加了视频播放和背景音乐播放，相对比普通3D相册旋转木马，功能上了一个层次。
3D相册木马旋转网页特效，配音乐
05-31
在IT领域，网页特效是提升用户体验和视觉效果的重要手段，尤其在展示个人作品、婚纱摄影、艺术设计等场合，3D相册木马旋转网页特效更是一种独特且引人注目的设计元素。这个特效结合了3D技术与HTML语言，为用户创造出...
js 3D相册 js 3D相册
04-20
js 3D相册；js 3D相册；js 3D相册；js 3D相册；js 3D相册；
3D电子相册.zip
08-25
3D电子相册源码，内含三个电子相册源码（抖音很火的立方体相册.zip+HTML5+js实现非常带感的3D立体图片相册代码+精美3D版相册源码 程序员表白专属必备）
3D旋转相册.zip
10-14
网页3D旋转相册，负有代码，下载即可打开见到效果，还可以更换自己喜欢的相册进去，旋转的速度都可以调
html5的3D相册
12-11
html5的3D相册代码，其中jpg因人而异，采用前端技术的一个小制作。
程序员给女朋友用HTML5制作的3D相册免费(附源码)
04-28
一个高大上的HTML5作品,是利用HTML5 canvas制作的3D图片展示。据说是程序员给自己女朋友做的。谁说程序员不懂浪漫!源码下载:CSDN下载频道或来自ypxyangyangyang的整理。...
python做3d相册_简单3D翻页相册制作教程(示例代码)
weixin_42323064的博客
01-13 4286
3D效果看起来总是要比平面的图形看起来视觉效果要好的多，今天来教大家制作简单的3D翻页效果的视频。那么3D图1：简单3D翻页相册一、素材准备1、图片素材婚纱照或者写真照片都可以，但是一定要高清，至少分辨率1920*1080的。图2：高清素材图片2、视频素材下面有请小编视频作品中出场率超高的蓝色扫光视频素材再次闪亮登场，鼓掌！！！图3：蓝色扫光视频3、音乐素材一首《Paris Paris》带来不一样...
制作简易的3D相册
weixin_30457065的博客
06-09 871
  今天介绍一下3D相册，用到了开源的FeatureCoverFlow控件，之前的几个作品用的也全都是开源的控件，为什么要用开源的控件呢，因为...他稳定啊！ 1.准备   仍然是，去掉标题栏，然后导库： implementation 'com.github.moondroid.coverflow:library:1.0'   导完库之后就会发现一个错误   看见没，报错了，min...
python3d相册源代码_iOS燃烧动画、3D视图框架、天气动画、立体相册、微信朋友圈小视频等源码...
weixin_35531735的博客
01-14 347
iOS精选源码iOS优质博客前言之前学习GCD的时候，在很多文章中看到过这段段代码：-(void)viewDidLoad{;NSLog(@"1");dispatch_sync(di... 阅读原文毕业好几年了，上周发送了简历给腾讯，参加了腾讯面试。具体部门这边就不说了。这次面试还是收获到了很多。一面电话面试：面试官主要是针对iOS相关的基础问题。先简单自我介绍一下自己对...
html5 3d相册
xy_main的专栏
04-22 1984
http://www.webhek.com/misc/3d-album/
3D音乐相册源码：一键更换照片与背景音乐
6. 文件名称列表意义：提供的文件名称列表“背景音乐源码”表明，该压缩文件可能仅包含了音乐源码部分，并没有直接提供完整的音乐相册或3D相册软件。这暗示了开发者可能需要结合其他代码或程序来实现完整的功能。 ...
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱打瞌睡的CV君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值