Visual Studio Code编写html代码实现立方体相册，表白相册_visual studio电子相册制作

作者：2023面试高手 | 2024-02-20 18:42:43

踩

visual studio电子相册制作

立方体相册源代码html代码

完整代码（图片链接地址为绝对链接地址即网络上图片）
代码可直接运行

<!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>3D立方体相册</title>
    <style type="text/css">
        #wrap span {
     
            display: block;
            width: 200px;
            height: 200px;
            /* background-color: khaki; */
            position: absolute;
            top: 75px;
            left: 75px;
        }
        
        #wrap {
     
            width: 350px;
            height: 350px;
            margin: 200px auto;
            animation: rotate 20s infinite;
            /*3d空间展现*/
            transform-style: preserve-3d;
            animation-timing-function: linear;
            background-image: url("C:\Users\1111\Desktop\立方相册\1414.jpg");
        }
        /*设置图片大小*/
        
        #wrap img {
     
            width: 100%;
            height: 100%;
        }
        
        #wrap span img {
     
            filter: opacity(100%);
        }
        
        #wrap div img {
     
            filter: opacity(90%);
        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/120598