前言：

最近抖音上3D照片墙突然火了起来，一个动态的视频加上一个照片墙的弧形轮播，非常的炫酷。
抖音上的3D照片墙有的是用AE软件制作的，有的是通过软件生成的
那么今天就用代码做一个这种炫酷3D照片墙。

快来给你女朋友做一个吧~

我们需要将自己女朋友照片或者女神照片素材放在img目录里，我这里没有素材，所以我用Python写了个脚本来提取某手的图集照片作为素材。
打开浏览器开发者工具，定位到图片标签上，使用xpath表达式对标签进行匹配：
```
//img[@class="long-mode-item"]
```

可以看到匹配到了28个对象，这说明xpath表达式写的没问题，再把xpath表达式复制

在pycharm中编写代码进行图片素材的获取:

import requests,re
from lxml import etreeif __name__ == '__main__':url = input('输入快手图集链接：')url = re.findall("(https://\w.\w+.\w.\w/\w+)",url)[0]print(url)headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36'}response = requests.get(url, headers=headers)html = response.textetr = etree.HTML(html)imgs = etr.xpath('//img[@class="long-mode-item"]/@src')for img in imgs:index = list(imgs).index(img) + 1req = requests.get(img)with open(f'img/{index}.webp', 'wb') as f:f.write(req.content)print(f'{index}.webp ---下载成功！')

运行代码，提取图片素材：

可以看到img目录已经下载好了图片素材

然后我们将img目录拷贝覆盖至hbuilder中的img目录即可。

如图所示，在项目中加入女朋友或女神照片：

然后就是html代码了，复制如下html代码：

index.html：

<!DOCTYPE html>
<html lang="en" ondragstart="return false"><head><meta charset="UTF-8"><meta name="Keywords" content=""><meta name="Description" content=""><title>3D旋转照片墙</title><!-- 如果我有天醒来 --><!-- 层叠样式表 --><style type="text/css">/* 去掉默认效果 */* {margin: 0;padding: 0;}body {background: #222;overflow: hidden;/* 取消选中 */user-select: none;}@keyframes rotate {100% {transform: rotateY(360deg);}}.perspective {/*子元素透视 场景深度*/perspective: 600px;}.wrap {/* 3d */width: 135px;height: 240px;margin: 100px auto;position: relative;/* border: 1px solid red; */transform: rotateX(-20deg) rotateY(0deg);transform-style: preserve-3d;}.wrap img {display: block;/* 绝对定位 */position: absolute;width: 100%;height: 100%;transform: rotateY(0deg) translateZ(0px);background: transparent;box-shadow: 0 0 4px #fff;border-radius: 5px;/* webkit */}/* 照片底座 */.wrap p {width: 1200px;height: 1200px;background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));position: absolute;border-radius: 50%;left: 50%;top: 100%;margin-left: -600px;margin-top: -600px;/* 沿着x轴按倒 */transform: rotateX(90deg);}</style></head><body><!-- 盒子容器 --><div class="perspective"><div class="wrap" id="imgwrap"><!-- 引入图片值页面 --><img class="f1" src="img/12.webp" /><img class="f1" src="img/13.webp" /><img class="f1" src="img/14.webp" /><img class="f1" src="img/15.webp" /><img class="f1" src="img/16.webp" /><img class="f1" src="img/1.webp" /><img class="f1" src="img/2.webp" /><img class="f1" src="img/3.webp" /><img class="f1" src="img/4.webp" /><img class="f1" src="img/5.webp" /><img class="f1" src="img/6.webp" /><img class="f1" src="img/7.webp" /><img class="f1" src="img/5.webp" /><img class="f1" src="img/6.webp" /><img class="f1" src="img/7.webp" /><img class="f1" src="img/8.webp" /><img class="f1" src="img/9.webp" /><img class="f1" src="img/10.webp" /><img class="f1" src="img/11.webp" /><img class="f1" src="img/17.webp" /><img class="f1" src="img/18.webp" /><img class="f1" src="img/19.webp" /><img class="f1" src="img/20.webp" /><img class="f1" src="img/21.webp" /><img class="f1" src="img/22.webp" /><img class="f1" src="img/23.webp" /><img class="f1" src="img/24.webp" /><img class="f1" src="img/25.webp" /><img class="f1" src="img/26.webp" /><img class="f1" src="img/27.webp" /><img class="f1" src="img/28.webp" /><img class="f1" src="img/29.webp" /><img class="f1" src="img/30.webp" /><!-- 引入图片值页面 --><img class="f2" src="img/1.webp" /><img class="f2" src="img/2.webp" /><img class="f2" src="img/3.webp" /><img class="f2" src="img/4.webp" /><img class="f2" src="img/5.webp" /><img class="f2" src="img/9.webp" /><img class="f2" src="img/10.webp" /><img class="f2" src="img/11.webp" /><img class="f2" src="img/12.webp" /><img class="f2" src="img/25.webp" /><img class="f2" src="img/26.webp" /><img class="f2" src="img/27.webp" /><img class="f2" src="img/28.webp" /><img class="f2" src="img/29.webp" /><img class="f2" src="img/30.webp" /><img class="f2" src="img/13.webp" /><img class="f2" src="img/14.webp" /><img class="f2" src="img/15.webp" /><img class="f2" src="img/16.webp" /><img class="f2" src="img/17.webp" /><img class="f2" src="img/18.webp" /><img class="f2" src="img/19.webp" /><img class="f2" src="img/20.webp" /><img class="f2" src="img/21.webp" /><img class="f2" src="img/22.webp" /><img class="f2" src="img/23.webp" /><img class="f2" src="img/24.webp" /><img class="f2" src="img/6.webp" /><img class="f2" src="img/7.webp" /><img class="f2" src="img/5.webp" /><img class="f2" src="img/6.webp" /><img class="f2" src="img/7.webp" /><img class="f2" src="img/8.webp" /><!-- 引入图片值页面 --><img class="f3" src="img/1.webp" /><img class="f3" src="img/2.webp" /><img class="f3" src="img/11.webp" /><img class="f3" src="img/12.webp" /><img class="f3" src="img/25.webp" /><img class="f3" src="img/26.webp" /><img class="f3" src="img/27.webp" /><img class="f3" src="img/3.webp" /><img class="f3" src="img/4.webp" /><img class="f3" src="img/5.webp" /><img class="f3" src="img/16.webp" /><img class="f3" src="img/17.webp" /><img class="f3" src="img/18.webp" /><img class="f3" src="img/10.webp" /><img class="f3" src="img/28.webp" /><img class="f3" src="img/29.webp" /><img class="f3" src="img/30.webp" /><img class="f3" src="img/13.webp" /><img class="f3" src="img/19.webp" /><img class="f3" src="img/20.webp" /><img class="f3" src="img/21.webp" /><img class="f3" src="img/22.webp" /><img class="f3" src="img/23.webp" /><img class="f3" src="img/24.webp" /><img class="f3" src="img/9.webp" /><img class="f3" src="img/14.webp" /><img class="f3" src="img/15.webp" /><img class="f3" src="img/6.webp" /><img class="f3" src="img/7.webp" /><img class="f3" src="img/5.webp" /><img class="f3" src="img/6.webp" /><img class="f3" src="img/7.webp" /><img class="f3" src="img/8.webp" /><p></p></div></div><!--  src="JS/photo.js" --><script type="text/javascript">let mp3 = 'audio/再见.mp3'let audio = new Audio(mp3)audio.autoplayaudio.play()var oImg = document.getElementsByClassName('f1')var oImg2 = document.getElementsByClassName('f2')var oImg3 = document.getElementsByClassName('f3')var len = oImg.length;console.log(len)var deg = 360 / len;var oWrap = document.getElementById("imgwrap");// var oWrap=document.querySelector('.wrap');//页面加载完毕在执行的代码window.onload = function() {Array.prototype.forEach.call(oImg, function(ele, index, self) {// 旋转并沿Z轴平移ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px)";//过渡时间1sele.style.transition = "1s " + (len - index) * 0.1 + "s";});Array.prototype.forEach.call(oImg2, function(ele, index, self) {// 旋转并沿Z轴平移ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(240px)";//过渡时间1sele.style.transition = "1s " + (len - index) * 0.1 + "s";});Array.prototype.forEach.call(oImg3, function(ele, index, self) {// 旋转并沿Z轴平移ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(480px)";//过渡时间1sele.style.transition = "1s " + (len - index) * 0.1 + "s";});// Array.prototype.forEach.call(oImg, function (ele, index, self) {//       // 旋转并沿Z轴平移//       ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";//       //过渡时间1s//       ele.style.transition = "1s " + (len - index) * 0.1 + "s";// });}//翻动3D相册var newX, newY, lastX, lastY, minusX, minusY, rotX = -20,rotY = 0;document.onmousedown = function(e) {// 点击设置初值lastX = e.clientX;lastY = e.clientY;this.onmousemove = function(e) {newX = e.clientX;newY = e.clientY;minusX = newX - lastX;minusY = newY - lastY;rotX -= minusY * 0.2;rotY += minusX * 0.1;oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)";lastX = newX;lastY = newY;}this.onmouseup = function(e) {//鼠标松开this.onmousemove = null; //清除鼠标移动}}</script></body></html>

注意事项

我这里播放了音频，项目中有音频文件，如果你没有会报异常
如果你不想网页中播放音频，可以将如下代码删除或者注释。

这样一个炫酷的3D照片墙效果就有了，效果图如下：

ps：拖动鼠标可滚动照片墙哟~

获取更多实用技巧，请关注公众号：

用代码做一个浪漫的“3D照片墙”相关推荐

c++获取子类窗口句柄位置_干货分享：用一百行代码做一个C/C++表白小程序，程序员的浪漫！...
前言:很多时候,当别人听到你是程序员的时候.第一印象就是,格子衫.不浪漫.直男.但是程序员一旦浪漫起来,真的没其他人什么事了.什么纪念日,生日,情人节,礼物怎么送? 做一个浪漫的程序给她,放上你们照片 ...
用Three.js做一个简单的3D场景
Three.js是什么 Three.js 是一款运行在浏览器中的 3D 引擎,我们可以用它来创造我们所需要的一系列3D动画场景,简而言之就是建在网页上的3D模型.利用Three.js可以制作出很多酷炫 ...
初次玩pyecharts：30行代码做一个可视化广东省各地天气温度排行图
初次玩pyecharts:30行代码做一个可视化广东省各地天气温度排行图开篇点题,直接上效果图开篇再点题,直接上源码 import re import requests from pyechart ...
可以帮我做一个python的3D飞机小游戏吗
当然可以!我很乐意帮助你做一个 Python 的 3D 飞机小游戏. 如果你是 Python 初学者,我建议你先了解一些 Python 的基础知识,包括变量.数据类型.流程控制语句.函数等.这些知识都 ...
用Python代码做一个简单数字小游戏
#作者是一个十三岁的小男孩. 编辑工具电脑Python 需要模块 random #今日用代码做一个猜数小游戏 #话不多说,上代码!!! import random number = random.r ...
每日一技：给女友用代码做一个3D旋转相册，每天亿遍忘记初恋~
前言不会表白?!我来教你给女朋友或者正在追求的妹子一点小惊喜~ 今天这篇文章就是演示给女友做一个3D旋转相册,学会的小伙伴可以给自己的女朋友或者喜欢的女生做一个,相比几百上千的礼物,零成本的技术实现 ...
python量化策略代码_手把手教你用三行python 代码做一个动量策略「量化投资系列」...
动量策略是右侧交易里最常见的,背后的逻辑是就现在涨的,后市还会涨,动量具有惯性的意思. 首先加载原始数据,我们用天的收盘价即可,按统一转为收益率.因为点位本身不重要,我们最后只关心变化率. 以沪深30 ...
自己用html + js 一百行代码做一个朗读器
感谢内容提供者:金牛区吴迪软件开发工作室文章目录前言一.设置语言和朗读人员二.设置音高[不是声音大小] 三.设置音速四.设置声音大小五.添加暂停和恢复播放功能六.完整代码前言因为笔者 ...
20行代码做一个简易微信群发工具需要哪些单词
群发工具是一些销售.中介.网课助手等都爱喜欢用的小工具.在微信还支持网页版登录时候,我们可以用wxpy做群发工具,这样更专业更高效.但随着微信关闭了网页版登录后,这个库彻底不能用了.好在我们可以用原始 ...
python量化投资代码_手把手教你用三行python 代码做一个动量策略「量化投资系列」...
动量策略是右侧交易里最常见的,背后的逻辑是就现在涨的,后市还会涨,动量具有惯性的意思. 首先加载原始数据,我们用天的收盘价即可,按统一转为收益率.因为点位本身不重要,我们最后只关心变化率. 以沪深30 ...

用代码做一个浪漫的“3D照片墙”

注意事项

用代码做一个浪漫的“3D照片墙”相关推荐

最新文章

热门文章