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

最新推荐文章于 2024-07-27 23:01:21 发布
最新推荐文章于 2024-07-27 23:01:21 发布
阅读量4.7k 收藏 32
点赞数 5
分类专栏： python 文章标签： p2p 网络协议 网络
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33215172/article/details/124522949
版权
本文介绍了如何利用Python爬虫从某手获取图片素材，并结合HTML代码创建一个炫酷的3D旋转照片墙效果。通过拖动鼠标可实现照片墙的滚动，适合展示个人照片或作为礼物。代码包括图片下载和HTML布局，同时提供了音频播放功能。
摘要由CSDN通过智能技术生成

前言：

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

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

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

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

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

import requests,re
from lxml import etree

if __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.text
    etr = etree.HTML(html)
    imgs = etr.xpath('//img[@class="long-mode-item"]/@src')
    for img in imgs:
        index = list(imgs).index(img) + 1
        req = 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.autoplay
            audio.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)";
                    //过渡时间1s
                    ele.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)";
                    //过渡时间1s
                    ele.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)";
                    //过渡时间1s
                    ele.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：拖动鼠标可滚动照片墙哟~

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

 

Python编程站
关注
专栏目录
python表白代码照片墙-这个七夕节，用Python为女友绘制一张爱心照片墙吧！
weixin_37988176的博客
11-01 2782
欢迎添加华为云小助手微信（微信号：HWCloud002 或 HWCloud003），输入关键字“加群”，加入华为云线上技术讨论群；输入关键字“最新活动”，获取华为云最新特惠促销。华为云诸多技术大咖、特惠活动等你来撩又是一年七夕时今天是七夕节，中国传统的情人节。可预期到的是，估计有很多年轻的情侣们，已经为这个节日提前准备好久了吧？烂大街的套路无非就是送花、吃饭、电影院，看完电影找酒店。作为一个引爆消...
css照片墙3D代码
Juntil_hu的博客
12-07 1408
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
html5 svg图片可3d旋转的扁平风格照片墙画廊
12-12
这是一款使用html5 svg制作的扁平风格的照片墙画廊，用户可以通过画廊下方的导航按钮切换照片，每次会随机将一张图片放在画廊中间，并可通过旋转按钮使图片做3d旋转，以显示照片信息。
3D照片墙实现
2201_75866478的博客
11-17 232
主要的知识是transform的知识点和animate的知识点，重点是transform-style: preserve-3d;作用是实现3d效果，当我们画正方体等3d图的时候会用到。是不是感觉3D照片墙很炫酷？其实很简单，仅仅只用到了html和css的知识。要是不用，我们看到的是2d效果。有兴趣的可以去瞧一下代码。
前端练习＜Html&CSS＞——照片墙（附完整代码及实现效果）
Blusher1的博客
07-27 3570
​这个小练习也来源于b站up小K师兄，大家可以通过下面的链接学习哦~up讲的非常详细。 纯CSS写一个简单酷炫的照片墙效果～ 先看一下这个照片墙的效果： 1.鼠标没有放到图片上时，照片同比例，每张照片都有倒影的效果。 2.然后是鼠标放置图片上的效果，图片被放大，其他照片旋转缩放，这里需要注意，左右两边的照片是对称倾斜的。
浪漫程序员会表白之抖音旋转立方体照片墙
漫漫前端路，进一寸有进一寸的欢喜
04-20 5871
人分两类，是你和不是你。 时间分两类，你在的时候和你不在的时候。
query超酷的3D立体照片墙特效代码.zip
07-04
query超酷的3D立体照片墙特效代码
3d照片墙html5.
06-06
照片墙html5
JS实现的非常漂亮的3D立体照片墙显示效果代码.zip
05-01
JS实现的非常漂亮的3D立体照片墙显示效果代码.zip
3D照片墙图片展示代码.zip
07-04
3D照片墙图片展示代码，3D立体效果照片墙，效果很酷，点击照片墙缩略图可以显示大图，带图片位置坐标功能。
JS实现的非常漂亮的3D立体照片墙显示效果代码
10-27
JS实现的非常漂亮的3D立体照片墙效果代码，是一段将需要的图片以非常不规则的形式展现出来的3D立体照片墙效果代码，进入页面时，所有图片均以小图显示，根据所点击选择的缩略图，会以不同的方式显示大图，同时，在左侧还有所有图片的照片布局图，大家也可以在这里对图片进行切换，有需要此段代码的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特效源码。
3D照片墙图片展示代码.rar
05-24
3D照片墙图片展示代码，3D立体效果照片墙，效果很酷，点击照片墙缩略图可以显示大图，带图片位置坐标功能。
立体感强的3D 照片墙特效特效代码
03-20
3D照片墙图片展示特效代码
03-20
3D照片墙图片展示代码，3D立体效果照片墙，效果很酷，点击照片墙缩略图可以显示大图，带图片位置坐标功能。
flash 3d照片墙，带源码
08-13
flash3d照片墙，里面有源码，是用flash做的，可以参考下
照片墙代码特效jquery
02-21
照片墙代码特效jquery
情人节浪漫3D照片墙源码
06-27
HTML 3D照片墙是一种创新的方式，可以用来送给女朋友一个特殊的礼物。 表格照片墙、球状照片墙、螺旋照片墙和格子照片墙等布局形式，可以将你们的美好回忆以独特而有趣的方式展示出来。通过这个特别的照片墙，你可以...
如何用C3做出3D照片墙
ychy1的博客
10-22 294
用C3 写出3D动态照片墙
wpf照片墙（带有3d效果）.zip_WPF_badai1_wpf 照片_wpf 照片墙_照片墙
07-15
要实现这样一个3D照片墙，开发者可能使用了以下WPF的关键技术： 1. **3D图形和渲染**：利用Viewport3D和Model3DGroup元素来创建3D场景，将每张照片视为一个3D对象。 2. **动画**：通过Storyboard和Timeline创建...
用js代码制作出一个多彩照片墙
最新发布
10-17
使用JavaScript制作一个多彩照片墙可以涉及HTML、CSS和JavaScript的结合。这里是一个简单的示例，展示如何创建一个基础的照片墙，图片会随机改变颜色： 首先，在HTML中设置一个容器来放置图片： ```html (this)...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值