js响应式蜂巢排版样式

来源:https://www.sucaihuo.com/js/1644.html 2017-04-05 23:21浏览(1762) 收藏

这是一款响应式菱形排版样式鼠标经过后有文字说明可以做相册实用。
js响应式蜂巢排版样式
分类:图片代码 > 图片墙 难易:初级
查看演示 下载资源 下载积分: 20 积分
@media (max-width: 600px) { /* <- 2-1  hexagons per row */
    .hex {
        width: 49.5%; /* = (100-1) / 2 */
        padding-bottom: 57.158%; /* =  width / sin(60) */
    }
    .hex:nth-child(3n+3) {
        margin-top: -13.423%;
        margin-bottom: -13.423%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    }
    .hex:nth-child(3n+3):last-child {
        margin-bottom: 0;
    }
    .hex:nth-child(3n+3) {
        margin-left: 0.5%;
    }
    .hex:nth-child(3n+2) {
        margin-left: 1%;
    }
    .hex:nth-child(3n+4) {
        clear: left;
    }
}
@media (max-width: 400px) {
    #hexGrid {
        font-size: 13px;
    }
}
标签: 网格蜂巢
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2