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>
  • 相关阅读:
    CSS3 转换2D transform
    jquery中this和event.target的区别
    jQuery中事件对象e的事件冒泡用法示例(事件冒泡与阻止冒泡)
    表单Checkbox全选反选全不选
    表单获取焦点失去焦点
    表单非空校验
    无刷新评论
    定时器.倒计时
    虚拟硬件调整
    虚拟机功能
  • 原文地址:https://www.cnblogs.com/yanshanshuo/p/4777655.html
Copyright © 2011-2022 走看看