IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		图片批量下载器
↓批量下载图片,美女图库↓ 		图片自动播放器
↓图片自动播放器↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> Python知识库 -> 【3D相册】零基础完成3D相册并配上背景音乐 -> 正文阅读

[Python知识库]【3D相册】零基础完成3D相册并配上背景音乐

文章目录

一、前言

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

二、准备工作

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自动播放无效问题》
  Python知识库 最新文章
Python中String模块
【Python】 14-CVS文件操作
python的panda库读写文件
使用Nordic的nrf52840实现蓝牙DFU过程
【Python学习记录】numpy数组用法整理
Python学习笔记
python字符串和列表
python如何从txt文件中解析出有效的数据
Python编程从入门到实践自学/3.1-3.2
python变量
上一篇文章      下一篇文章      查看所有文章
加:2022-04-27 11:17:51  更:2022-04-27 11:18:49 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年2日历 -2025/2/28 9:40:36-

图片自动播放器
↓图片自动播放器↓ 		TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓ 		图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码