纯CSS照片墙

最新推荐文章于 2024-07-11 10:00:00 发布

qiupu4667

最新推荐文章于 2024-07-11 10:00:00 发布

阅读量408

点赞数

本文链接：https://blog.csdn.net/qiupu4667/article/details/70232052

版权

效果图:

1.html:

    <div class="banner clearfix">
        <ul class="polaroids">
            <li><a href="javascript:void(0)" title="豆豆"><img src="/yezi/img/1_yezi.png"></a></li>
            <li><a href="javascript:void(0)" title="猫了个咪"><img src="/yezi/img/2_yezi.png"></a></li>
            <li><a href="javascript:void(0)" title="狗狗"><img src="/yezi/img/3_yezi.png"></a></li>
            <li><a href="javascript:void(0)" title="biubiu"><img src="/yezi/img/1_yezi.png"></a></li>
            <li><a href="javascript:void(0)" title="哈喽"><img src="/yezi/img/2_yezi.png"></a></li>
            <li><a href="javascript:void(0)" title="我是小猫咪"><img src="/yezi/img/3_yezi.png"></a></li>
            <li><a href="javascript:void(0)" title="哇呜"><img src="/yezi/img/1_yezi.png"></a></li>
        </ul>
    </div>

2.CSS:

.banner {width:100%;height:301px;/*background-color:#FFB6C1;*/overflow:hidden; }
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.polaroids {margin: 40px 0 18px 10px;}
.polaroids li{display: inline;}
.polaroids a{
    background: #fff;
    display: inline;float:left;margin:0 0 27px 30px;width:auto;padding:10px 10px 15px;text-align: center;
    font-family: "Marker Felt", sans-serif;text-decoration: none;color:#333;font-size: 18px;
    -webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);
    -moz-box-shadow:0 3px 6px rgba(0,0,0,.25);
    -o-box-shadow:0 3px 6px rgba(0,0,0,.25);
    box-shadow:0 3px 6px rgba(0,0,0,.25);
            }
.polaroids img{display: block;width:190px;margin-bottom:12px;}
.polaroids a:after{
content: attr(title);
/* Ie8+,FF,Chorme,Safari */}
.polaroids li:nth-child(even) a{-webkit-transform:rotate(55deg);-moz-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);}
.polaroids li:nth-child(5n) a{-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);
    position: relative;right:0px;}
.polaroids li:nth-child(3n) a{position: relative;top:-6px;right:-5px;}
.polaroids li a:hover{
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    transform:scale(1.5);
    -webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);
    -moz-box-shadow:0 3px 6px rgba(0,0,0,.5);
    -o-box-shadow:0 3px 6px rgba(0,0,0,.5);
    box-shadow:0 3px 6px rgba(0,0,0,.5);
    position: relative;
    z-index: 5;
    }