html+css实现照片墙

最新推荐文章于 2023-09-11 16:41:04 发布

wending-Y

最新推荐文章于 2023-09-11 16:41:04 发布

阅读量2w

点赞数 12

分类专栏：前端文章标签： html css 图片

本文链接：https://blog.csdn.net/qq_22222499/article/details/52344589

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

实现效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3图片</title>
    <style type="text/css">
        body{
            background: rgba(17, 17, 17, 0.1);
        }
        h1{
            text-align: center;
            text-shadow: 2px 2px 10px  #6ce893;
        }
        .container{
            width: 960px;
            height: 450px;
            margin: 60px auto;
            position: relative;

        }
        img{
            padding:10px 10px 15px;background: rgba(104, 147, 160, 0.55);border: 3px solid #dddddd;position: absolute;top:50px;
            left:200px;transform: rotate(30deg);transition: 1s}
        img:hover{transform: rotate(0deg);transform: scale(0.5);box-shadow: 10px 10px 15px #80dd44
        }
        .p1{
            left: 100px;
            top:30px;
        }
        .p2{
            left: 350px;
            top:30px;
            transform: rotate(-50deg);
        }
        .p3{
            left: 580px;
            top:30px;
            transform: rotate(50deg);
        }
        .p4{
            left: 860px;
            top:30px;
            transform: rotate(-50deg);
        }
        .p5{
            left: 100px;
            top:200px;
            transform: rotate(50deg);
        }
        .p6{
            left: 350px;
            top:210px;
            transform: rotate(60deg);
        }
        .p7{
            left: 700px;
            top:210px;
            transform: rotate(-50deg);
        }
      </style>
</head>
<body>
<h1>照片墙</h1>
<div class="container">
    <img class="p1" src="src/11.jpg">
    <img class="p2" src="src/12.jpg">
    <img class="p3" src="src/14.jpg">
    <img class="p4" src="src/15.jpg">
    <img class="p5" src="src/16.jpg">
    <img class="p6" src="src/17.jpg">
    <img class="p7" src="src/18.jpg">

</div>

</body>
</html>

wending-Y

关注

12
点赞
踩
64

收藏

觉得还不错? 一键收藏
打赏
2
评论
html+css实现照片墙

实现效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3图片</title> <style type="text/css"> body{ background: rgba(17, 17, 17, 0.1); }
复制链接

扫一扫