搜索
查看: 1867|回复: 0

利用css实现相册效果

[复制链接]

649

主题

942

帖子

2421

积分

管理员

本论坛第一帅

Rank: 9Rank: 9Rank: 9

积分
2421

热心会员推广达人宣传达人突出贡献优秀版主荣誉管理论坛元老

QQ
发表于 2021-6-7 19:18:01 | 显示全部楼层 |阅读模式
首先来看看效果

css

 #grid li {
        float: left;
        list-style: none;
        margin: 0 25px 25px 0;
        position: relative;
        overflow: hidden;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
        -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        -webkit-transition: all 0.15s ease-in;
        -moz-transition: all 0.15s ease-in;
        -ms-transition: all 0.15s ease-in;
        transition: all 0.15s ease-in;
}
#grid li.end {
        margin-right: 0;
}
#grid li:nth-child(3n) {
margin-right: 0;
}


#grid img, li[zxsq-anti-bbcode-id]:target div, #grid li, .backface {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        width: 200px;
        height: 150px;
}
#grid .details {
        position: absolute;
        bottom: 0;
        background: #fff;
        background: rgba(255, 255, 255, 0.87);
        border-top: 1px solid #fff;
        width: 200px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
       
        -webkit-border-radius:  0 0 5px 5px;
        -moz-border-radius: 0 0 5px 5px;
        border-radius: 0 0 5px 5px;
        -webkit-box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.35);
        -moz-box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.35);
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.35);
}
#grid .details h3 {
        margin-bottom: 0px;
        letter-spacing: -1px;
}
#grid .details h3:hover {
        -webkit-transition: margin-left .8s;
    -moz-transition: margin-left .8s;
    -o-transition: margin-left .8s;
    margin-left: -30px;
}

#grid .details a.more {
        position: absolute;
        right: 10px;
        top: 5px;
        text-decoration: none;
        font-size: 12px;
        padding: 6px 10px;
        background-color: rgba(0, 0, 0, 0.03);
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 15px;
        -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.6);
        -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.6);
        box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.6);
        -webkit-transition: all 0.15s ease-in;
}
#grid .details a.more:hover {
        background-color: #0090e2;
        color: #fff;
}
#information {
        z-index: 20;
}
#information li div h3 {
        background-color: #0090E2;
        border-radius: 5px 5px 0 0;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        margin: -30px -30px 20px;
        padding: 15px 30px;
        text-shadow: rgba(0, 0, 0, 0.4492);
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
        letter-spacing: -2px;
}

html
 <div id="container">

  <ul id="grid" class="group">
    <li>
      <div class="details">
        <h3>这时标题1</h3>
        <a class="more" href="#info1">阅读量</a> </div>
      <a class="more" href="#info1"><img src="https://bbskali.cn/data/attachment/forum/202106/01/164055g0fsj2f7d80j0zkk.jpg" /></a> </li>

  </ul>

       
         <ul id="grid" class="group">
    <li>
      <div class="details">
        <h3>这时标题2</h3>
        <a class="more" href="#info1">阅读量</a> </div>
      <a class="more" href="#info1"><img src="https://bbskali.cn/data/attachment/forum/202007/26/074440y66zgaawngrwwaan.png" /></a> </li>

  </ul>

</div>

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
有志者,事竟成,破釜沉舟,百二秦关终属楚. 苦心人,天不负, 卧薪尝胆 ,三千越甲可吞吴
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表