jQuery实现炫酷照片墙

最新推荐文章于 2021-07-23 12:08:37 发布

十友九

最新推荐文章于 2021-07-23 12:08:37 发布

阅读量731

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/weixin_43778556/article/details/106321970

版权

HTML 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

在这里插入图片描述

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <div class="wrapper">
        <ul class="wrapUl">
            <!-- li*25>div>img -->
            
        </ul>
    </div>
    <script src="jquery-3.3.1.js"></script>
    <script src="demo.js"></script>
</body>
</html>

demo.css

*{
    padding: 0;
    margin: 0;
    list-style: none;
}
html,body, .wrapper{
    width: 100%;
    height: 100%;
    background-color: #cecece;
}
.wrapUl{
    width: 80%;
    height: 80%;
    position: relative;
    margin: 50px auto;
    /* border: 1px solid black; */
    perspective: 700px;
}
.wrapUl li{
    transform-style: preserve-3d;
    position: absolute;
    /* border: 1px solid black; */
    background-color: #ffffff;
}
.box{
    width: 100%;
    height: 100%;
    transform: scale(0.9);
}
img{
    width: 100%;
    height: 100%;
}