html +js 实现 3D 相册自动旋转+流星雨背景+轮播图_带炫酷背景的自适应3d轮播图-优快云博客

本文链接：https://blog.youkuaiyun.com/A980719/article/details/103620670

这篇博客分享了如何使用HTML5和JavaScript实现一个3D相册，该相册具备自动旋转功能，并且背景中还有流星雨效果。作者提供了百度网盘的链接以供下载相关资源，但指出流星雨的相对位置可能有误，且屏幕自适应问题尚未解决。

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

标题 3D 相册自动旋转+流星雨背景+轮播图

百度网盘
链接：https://pan.baidu.com/s/1ER9g74XdnurAr053RnoVsA
提取码：love

效果图
在相对应的位置插入图片就行了

<!--  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <embed src="1.mp3" hidden="true" autostart="true" loop="true"> -->
    <title>相册</title>
    <style>
    *{ padding:0; margin:0; list-style:none; border:0;}
    html,body #stars .abc{
            margin: 0;
            padding: 0;
        }
        body,#stars .abc{
            width: 100%;
            height: 100%;
             perspective: 1000px;
            background-color:black;
        }
        .abc
        {
            position:absolute;
             /* overflow: hidden;*/
             margin:20px auto;
        }
         #stars
        
        {
          position: absolute;

          overflow: hidden;
        
        }
    .all{
            width:250px;
            height:400px;
            padding:1px;
            border:1px solid #ccc;
            margin:120px 0px 0px 35px;
            position:relative;
            float :left;
             background-size:contain;
        }
        .screen{
          width:250px;
            height:400px;
            overflow:hidden;
            position:relative;
        }
        .screen li{ width:250px;height:400px; overflow:hidden; float:left;}
        .screen ul{ position:absolute; left:0; top:0px; width:3000px;}
        .all1{
           width:250px;
           height:400px;
            padding:1px;
            border:1px solid #ccc;
            margin:120px auto;
            position:relative;
            left:300px;
            float :right;
            background-size:contain;
        }
        .screen1{
           width:250px;
           height:400px;
             padding:0px;
            overflow:hidden;
            position:relative;
        }
        .screen1 li{ width:250px;height:400px;overflow:hidden; float:left;}
        .screen1 ul{ position:absolute; left:-10; top:0px; width:3000px;}
    
         .album
         {
            width: 546px;
            height: 546px;
         margin: 300px 0px 0px 0px;
         }
        .album,#stars{
            perspective: 2000px; 
        }
        .album .photos{
            position:relative ;
            width: 246px;
            height: 246px;
            margin: 0px 300px;
            transform-style: preserve-3d; /*设置3d风格*/
            transform: rotateX(-10deg) rotateY(0deg);
        }
        .album .photos .photo{
            display: inline-block;
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid #fff;
            /*background-color: ;*/
            background-size:contain;
            transition: 2s;
        }
</style>
</head>
<body >
<div class="abc" >
<!-- <p> <marquee style="background