scss联系：蜂窝布局

_GuGu_

已于 2024-01-13 15:05:08 修改

阅读量356

点赞数 6

分类专栏： vue+element-plus的组件封装文章标签： scss 前端 css

于 2024-01-13 14:25:27 首次发布

本文链接：https://blog.csdn.net/m0_58235310/article/details/135569762

版权

vue+element-plus的组件封装专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<template>
    <div class="mainrouter" style="padding: 0px;overflow: hidden;">
        <div class="line" style="margin-top: 0px;">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</template>
<style lang="scss">
$n: 19; // 需要显示的线条数量
$size: 100%/$n;

.line {
    display: flex;
    width: 100%;
    margin-top: -$size / 12;

    .item {
        flex-shrink: 0;
        width: $size;
        height: 80px;
        background-color: #8fc2bf;
        // 六边形裁剪网站：http://tools.jb51.net/code/css3path
        -webkit-clip-path: polygon(50% 0%, 95% 24%, 95% 76%, 50% 100%, 7% 76%, 7% 24%);
        clip-path: polygon(50% 0%, 95% 24%, 95% 76%, 50% 100%, 7% 76%, 7% 24%);
        &:hover{
            transform: scale(1.2);
            transform: all 0.3s ease-in-out;//使动画在开始和结束时慢速过渡
            -webkit-transform: scale(1.2);
            -webkit-transition: all 0.3s ease-in-out;//使动画在开始和结束时慢速过渡
        }
    }

    // 该父元素的偶数子元素
    &:nth-child(even) {
        transform: translateX(-$size/2);//向左移动一个六边形
        -webkit-transform: translateX(-$size/2);//向左移动一个六边形
    }
}
</style>