CSS3transform制作漂亮的照片墙

最新推荐文章于 2024-05-12 17:47:11 发布

正在修炼web的小芮

最新推荐文章于 2024-05-12 17:47:11 发布

阅读量254

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/m0_71814235/article/details/125917247

版权

css3 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

创建盒子，链接图片，写入文本

<body>
    <div class="container">
        <div class="photowall">
            <div class="photo1">
                <div class="photoview">
                    <img src="./images/1.gif" alt="">
                    <p>四季变换</p>
                    <p>始终是你</p>
                </div>
            </div> 
            <div class="photo2">
                <div class="photoview">
                    <img src="./images/2.gif" alt="">
                    <p>终有一天</p>
                    <p>游遍桂林山水</p>
                </div>
            </div>
            <div class="photo3">
                <div class="photoview">
                    <img src="./images/3.gif" alt="">
                    <p>看壮阔的瀑布</p>
                    <p>纪念逝去的光阴</p>
                </div>
            </div>
            <div class="photo4">
                <div class="photoview">
                    <img src="./images/4.gif" alt="">
                    <p>你我相互依偎</p>
                    <p>倒映在水中</p>
                </div>
            </div>
        </div>
    </div>
</body>

写入css样式

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-image: url(./images/bjt.jpeg);
            background-size: cover;
            overflow: hidden;
        }
        .container{
            width: 100%;
            height: 100%;
        }
        .photowall{
            width: 100%;
            height: 100%;
            display: -webkit-box;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            /* outline: 1px dashed red; */
        }
        .photoview{
            padding: 10px 10px 20px 10px;
            margin: 5px;
            background-color: #f2eada;
            text-align: center;
            font-size: 20px;
            box-shadow: 0.2em 0.2em 0.8em #130c0e;
            position: relative;
        }
        .photoview img{
            width: 300px;
            height: 220px;
        }
        .photoview p{
            margin-top: 5px;
        }
        .photo1{
            transform-origin: right bottom;
            transform: rotate(10deg);
        }
        .photo2{
            transform-origin: right bottom;
            transform: rotate(-20deg);
        }
        .photo3{
            transform-origin: left top;
            transform: rotate(20deg);
        }       
        .photo4{
            transform-origin: left bottom;
            transform: rotate(-20deg);
        }
    </style>

最终效果预览