网格布局缩放

梅花三

已于 2022-10-12 10:12:50 修改

阅读量169

点赞数 1

分类专栏： css 文章标签：前端 css

于 2022-10-11 14:41:00 首次发布

本文链接：https://blog.csdn.net/weixin_43794073/article/details/127263240

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

源码

<template>
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</template>

<style scoped>
.container {
    --width: 150px;
    --gap: 10px;
    --scale: 1.5;
    --elnum: 4;

    display: grid;
    gap: var(--gap);
    /* 列宽度+间距 */
    width: calc(var(--elnum) * var(--width) + (var(--elnum) - 1) * var(--gap));
    /* 纵横比 */
    aspect-ratio: 1;
    /* 规定网格布局中的列数（和宽度） */
    grid-template-columns: repeat(var(--elnum), auto);
}

.container>div {
    width: 0;
    height: 0;
    min-width: 100%;
    min-height: 100%;
    /* 指定元素的内容应该如何去适应指定容器的高度与宽度 */
    object-fit: contain;
    cursor: pointer;
    background: #feac5e;
    background: -webkit-radial-gradient(#feac5e, #c779d0, #4bc0c8);
    background: radial-gradient(#feac5e, #c779d0, #4bc0c8);
    transition: all 0.3s;
}

.container>div:hover {
    width: calc(var(--width) * var(--scale));
    height: calc(var(--width) * var(--scale));
    background: #00c3ff;
    background: -webkit-radial-gradient(#00c3ff, #f56217,  #ffff1c);
    background: radial-gradient(#00c3ff, #f56217,  #ffff1c);
}
</style>