蜂窝相册效果-html代码-BFW代码库

蜂窝相册效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #1a1a1a;
        }

        .container {
            position: relative;
            /* to get a regualr hexagon with clip-path use the same scale, width is sqrt(3) / 2 of the height  */
            width: calc(260px * 0.866);
            height: 260px;
        }

        .box {
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            background: lightblue;
            clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
        }
        .box img {
            transform-origin: 50% 50%;
            object-fit: cover;
            transition: all .5s ease-out;
        }
        .box::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.45);
            transition: all .5s ease-out;
        }
        .box:hover img {
            transform: scale(1.2);
        }
        .box:hover::after {
            background: rgba(0, 0, 0, 0);
        }

        .box2.box {
            transform: translate(calc(-50% - (10px / 2)), calc(-75% - (10px) / 2 * 1.732));
        }

        .box3.box {
            transform: translate(calc(50% + (10px / 2)), calc(-75% - (10.........完整代码请登录后点击上方下载按钮下载查看

蜂窝相册效果

网友评论0

div+css实现旋转相册动画效果代码

css实现自适应图片相册滚动闪现入场动画效果代码

jquery+css实现自适应相册点击图片放大效果代码

gsap实现多张图片相册堆叠入场动画效果代码

js+css实现图片相册堆叠点击更换位置合并效果代码

css布局实现横向拖动的相片相册胶卷效果代码

css实现横向滚动图片相册代码

js+css实现横向滚动图片列表相册效果代码

color-thief实现图片相册列表主色调过滤筛选效果代码

uikit实现图片相册点击标签分类悬浮显示文字效果代码