Visual Studio Code编写html代码实现立方体相册，表白相册

最新推荐文章于 2024-07-13 17:22:05 发布

程序搬运の工

最新推荐文章于 2024-07-13 17:22:05 发布

阅读量3.2k

点赞数 9

文章标签： html vscode css

本文链接：https://blog.csdn.net/qq_54119714/article/details/121063204

版权

这篇博客展示了如何利用Visual Studio Code(VS Code)编写HTML代码来实现一个立方体相册效果。作者提供了完整的HTML源代码，该代码可以直接运行，相册中的图片链接采用的是网络上的绝对路径。

摘要由CSDN通过智能技术生成

立方体相册源代码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%);

最低0.47元/天解锁文章

程序搬运の工

关注

9
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
Visual Studio Code编写html代码实现立方体相册，表白相册

立方体相册源代码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-
复制链接

扫一扫