Question

我不知道这是不是正确的标题，如果不是，请帮我更改它。

好的，所以我想复制这张图片：

现在，我能够使用CSS实现某些部分：

以下是我为此编写的CSS代码：

$gradients-list: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%) linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)
 linear-gradient(160deg, #0093E9 0%, #80D0C7 100%) linear-gradient(90deg, #FAD961 0%, #F76B1C 100%) 
 linear-gradient(132deg, #F4D03F 0%, #16A085 100%) linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)
 linear-gradient(0deg, #08AEEA 0%, #2AF598 100%) linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%) 
 linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);



$grid-columns: 12;

.testimonials
{
    display: grid;
    grid-gap: 70px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    // overflow: hidden;
    transform: translatex(0%); 
    margin-bottom: 40px;
    // animation: marquesina 40s infinite normal linear 1s;

    &:last-child
    {
        margin-bottom: 0px;
    }

    &.tm-one 
    {
        transform: translateX(-20%);
        .tm-card:nth-child(2),
        .tm-card:nth-child(3)
        {
            opacity: 1;
            .tmc-img,
            .tmc-text
            {
                visibility: visible;
            }
        }
    }
    &.tm-two 
    {
        transform: translateX(-10%);
        .tm-card:nth-child(2),
        .tm-card:nth-child(3)
        {
            opacity: 1;
            .tmc-img,
            .tmc-text
            {
                visibility: visible;
            }
        }
    }

    &.tm-three 
    {
        transform: translateX(-60%);
        .tm-card:nth-child(3),
        .tm-card:nth-child(4)
        {
            opacity: 1;
            .tmc-img,
            .tmc-text
            {
                visibility: visible;
            }
        }
    }
}
.tm-card
{
    width: 370px;
    height: 90px;
    border-radius: 10px;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 15px;
    opacity: 0.1;

    .tmc-img
    {
        width: 60px;
        height: 60px;
        border-radius: 999em;
        // background-color: white;
        background-image: url('../steve.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        visibility: hidden;
    }

    .tmc-text
    {
        visibility: hidden;
        p
        {

            width: 180px;
            // height: 40px;
            font-size: 13px;
            font-family: $bold-font;
            margin-left: 25px;
            color: white;
            margin-bottom: 0px;

            &:nth-child(2)
            {
                font-family: $light-font;
                font-size: 12px;
            }
        }
    }


    @each $current-gradient in $gradients-list{
        $i: index($gradients-list, $current-gradient);
        &:nth-child(#{$i}){
            background-image: nth($gradients-list, $i);
        }
    }
}

@for $i from 1 through $grid-columns {
    .grid-#{$i}
    {
        width: percentage($i / $grid-columns);
    }
}

每行是一个有8列的.testimonial网格，我制作了3个独立的行。对于每一行，我使用transform: translateX();手动将元素转换到左右两侧。

我想知道如何在更宽的屏幕尺寸（例如2500px的宽度）中保持位置一致。

我想到的想法是编写一个自定义JavaScript函数，该函数将在屏幕调整大小时重新校准行的位置，但我不确定是否是这样。

以前有没有人遇到过这个问题。如果是这样，请在这里分享您的提示。：）

CSS网格设计-定位和缩放

0 个答案: