html+css实现照片墙

实现效果图html+css实现照片墙_第1张图片


<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>

你可能感兴趣的:(前端)