zoukankan      html  css  js  c++  java
  • CSS3 简易照片墙

    代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>照片墙</title>
            <style>
                *{
                    background: #eee;
                    margin: 0px;
                    padding: 0px;
                    position:absolute;
                }
                .qiang{
                    
                    width: 960px;
                    height: 450px;
                }
                .qiang img{
                    width: 200px;
                    margin: 20px 20px 30px;
                    padding: 15px 15px 30px;
                    border: solid 1px #fff;
                    /*边框阴影*/
                    box-shadow: 5px 5px 8px rgba(50,50,50,0.4);
                    background-color: #fff;
                    /*缩放动画效果*/
                    transition: all 0.5s ease-in-out;
                    -webkit-transition: all 0.5s ease-in-out;
                }
                .qiang img:hover{
                    transform:rotate(0deg);
                    /*角度调整为零,放大1.5倍;*/
                    -webkit-transform:rotate(0deg) scale(1.5);
                    z-index: 99;
                }
                
                
                .pic1{
                    transform: rotate(-5deg);
                    -webkit-transform: rotate(-5deg);
                }
                .pic2{
                    left: 240px;
                    -webkit-transform: rotate(7deg);
                }
                .pic3{
                    left: 500px;
                    -webkit-transform: rotate(-11deg);
                }
                .pic4{
                    left: 750px;
                    -webkit-transform: rotate(-13deg);
                }
                .pic5{
                    top: 300px;
                    transform: rotate(-5deg);
                    -webkit-transform: rotate(-6deg);
                }
                .pic6{
                    left: 240px;
                    top: 300px;
                    -webkit-transform: rotate(9deg);
                }
                .pic7{
                    left: 500px;
                    top: 300px;
                    -webkit-transform: rotate(-4deg);
                }
                .pic8{
                    left: 750px;
                    top: 300px;
                    -webkit-transform: rotate(-6deg);
                }
                
            </style>
        </head>
        <body>
            <div class="qiang">
                <img class="pic1" src="img/1.jpg" />
                <img class="pic2" src="img/2.jpg" />
                <img class="pic3" src="img/3.jpg" />
                <img class="pic4" src="img/4.jpg" />
                <img class="pic5" src="img/5.jpg" />
                <img class="pic6" src="img/6.jpg" />
                <img class="pic7" src="img/7.jpg" />
                <img class="pic8" src="img/8.jpg" />
            </div>
        </body>
    </html>
  • 相关阅读:
    python 获取字典值
    EF 预热
    多线程实战(三)线程池
    多线程实战(二)线程同步
    C#并行编程 (Barrier,CountdownEvent,ManualResetEventSlim,SemaphoreSlim,SpinLock,SpinWait )
    多线程实战(一) 线程基础
    构建千万级web访问架构
    程序员创业,远离管理软件
    两棵树,你砍哪一棵?
    NopCommerce Html扩展方法Html.Widget
  • 原文地址:https://www.cnblogs.com/yanshanshuo/p/4777655.html
Copyright © 2011-2022 走看看