纯CSS实现照片墙效果

AlbertYang
发布于 2020-09-08 15:30:26
1K0
发布于 2020-09-08 15:30:26
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>纯CSS实现照片墙</title>
    <style>
      /*
      *纯CSS实现照片墙：
      *公众号:AlbertYang
      */
      /* RESET */
      *{
          margin: 0;
          padding: 0;
      }
      
      body {
        font-family: Tahoma, Helvetica, "\5b8b\4f53", "Arial", sans-serif;
        font-size: 12px;
        color: #eeeeee;
      }
      
      .container{
          width: 90%;
          height: auto;
          margin: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
      
      .container .img-wrap {
          padding: 10px;
        margin: 10px;
          background: white;
          border: 1px solid #ddd;
        width: 160px;
        height: fit-content;
          box-shadow: 2px 2px 3px rgba(50,50,50,0.4);
          -webkit-transition: all 0.5s ease-in;
          -moz-transition: all 0.5s ease-in;
          -ms-transition: all 0.5s ease-in;
          -o-transition: all 0.5s ease-in;
          transition: all 0.5s ease-in;
          z-index: 1;
      }
      
      .container .img-wrap img {
          width: 100%;
        height: auto;
      }
      
      .container .img-wrap:after {
        content: attr(data-title);
        display: block;
        text-align: center;
                font-size: 15px;
        color: #FCC688;
      }
      
      .container .img-wrap:nth-child(1n){
        transform:rotate(-5deg);
          -webkit-transform:rotate(-5deg);
      }
      
      .container .img-wrap:nth-child(2n){
        transform:rotate(-20deg);
          -webkit-transform:rotate(-20deg);
      }
      .container .img-wrap:nth-child(3n){
        transform:rotate(5deg);
          -webkit-transform:rotate(5deg);
      }
      
      .container .img-wrap:nth-child(4n){
          transform:rotate(-10deg);
          -webkit-transform:rotate(-10deg);
      }
      
      .container .img-wrap:nth-child(5n){
          transform:rotate(-30deg);
          -webkit-transform:rotate(-30deg);
      }
      .container .img-wrap:nth-child(6n){
          transform:rotate(20deg);
          -webkit-transform:rotate(20deg);
      }
      
      .container .img-wrap:nth-child(7n){
          transform:rotate(50deg);
          -webkit-transform:rotate(50deg);
      }
      .container .img-wrap:nth-child(8n){
          transform:rotate(5deg);
          -webkit-transform:rotate(5deg);
      }
      .container .img-wrap:nth-child(9n){
          transform:rotate(15deg);
          -webkit-transform:rotate(15deg);
      }
      
      .container .img-wrap:nth-child(10n){
          transform:rotate(-15deg);
          -webkit-transform:rotate(-15deg);
      }
      .container .img-wrap:nth-child(11n){
          transform:rotate(-25deg);
          -webkit-transform:rotate(-25deg);
      }
      
      .container .img-wrap:hover {
          box-shadow: 15px 15px 20px rgba(50,50,50,0.4);
          transform:rotate(0deg) scale(1.20);
          -webkit-transform:rotate(0deg) scale(1.20);
          z-index: 2;
        position: relative;
      }
</style>
  </head>
  <body>
    <div class="container">
        <div class="img-wrap" data-title="照片1"><img src="http://dingyue.nosdn.127.net/3dI3RPSOI2eBbguqAvd3Tt8qeDZqVfBAIn2RRFktrpNe91512439810577.jpg"></div>
        <div class="img-wrap" data-title="照片2"><img src="http://01.minipic.eastday.com/20170207/20170207145729_d643e7de3fcaf066fe54e19b3293e074_4.jpeg"></div>
        <div class="img-wrap" data-title="照片3"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045&fm=26&gp=0.jpg"></div>
        <div class="img-wrap" data-title="照片4"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1119298312,2521482562&fm=26&gp=0.jpg"></div>
        <div class="img-wrap" data-title="照片5"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592929071799&di=41e3159489c46603fbcc0525675ad915&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3956123290%2C3155232422%26fm%3D214%26gp%3D0.jpg"></div>
        <div class="img-wrap" data-title="照片6"><img src="http://dingyue.nosdn.127.net/3dI3RPSOI2eBbguqAvd3Tt8qeDZqVfBAIn2RRFktrpNe91512439810577.jpg"></div>
        <div class="img-wrap" data-title="照片7"><img src="http://01.minipic.eastday.com/20170207/20170207145729_d643e7de3fcaf066fe54e19b3293e074_4.jpeg"></div>
        <div class="img-wrap" data-title="照片8"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045&fm=26&gp=0.jpg"></div>
        <div class="img-wrap" data-title="照片9"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1119298312,2521482562&fm=26&gp=0.jpg"></div>
        <div class="img-wrap" data-title="照片10"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592929071799&di=41e3159489c46603fbcc0525675ad915&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3956123290%2C3155232422%26fm%3D214%26gp%3D0.jpg"></div>
      <div class="img-wrap" data-title="照片1"><img src="http://dingyue.nosdn.127.net/3dI3RPSOI2eBbguqAvd3Tt8qeDZqVfBAIn2RRFktrpNe91512439810577.jpg"></div>
      <div class="img-wrap" data-title="照片2"><img src="http://01.minipic.eastday.com/20170207/20170207145729_d643e7de3fcaf066fe54e19b3293e074_4.jpeg"></div>
      <div class="img-wrap" data-title="照片3"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045&fm=26&gp=0.jpg"></div>
      <div class="img-wrap" data-title="照片4"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1119298312,2521482562&fm=26&gp=0.jpg"></div>
      <div class="img-wrap" data-title="照片5"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592929071799&di=41e3159489c46603fbcc0525675ad915&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3956123290%2C3155232422%26fm%3D214%26gp%3D0.jpg"></div>
      <div class="img-wrap" data-title="照片6"><img src="http://dingyue.nosdn.127.net/3dI3RPSOI2eBbguqAvd3Tt8qeDZqVfBAIn2RRFktrpNe91512439810577.jpg"></div>
      <div class="img-wrap" data-title="照片7"><img src="http://01.minipic.eastday.com/20170207/20170207145729_d643e7de3fcaf066fe54e19b3293e074_4.jpeg"></div>
      <div class="img-wrap" data-title="照片8"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045&fm=26&gp=0.jpg"></div>
      <div class="img-wrap" data-title="照片9"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1119298312,2521482562&fm=26&gp=0.jpg"></div>
      <div class="img-wrap" data-title="照片10"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592929071799&di=41e3159489c46603fbcc0525675ad915&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3956123290%2C3155232422%26fm%3D214%26gp%3D0.jpg"></div>
    </div>
  </body>
</html>
本文参与腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-06-23，如有侵权请联系 cloudcommunity@tencent.com 删除
本文分享自 AlbertYang 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！
登录后参与评论
0 条评论
热度
纯CSS实现照片墙效果

纯CSS实现照片墙效果

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐
