代码之家  ›  专栏  ›  技术社区  ›  MR Lappy

提要动画最后出现空白

  •  1
  • MR Lappy  · 技术社区  · 1 年前

    我正在为我的网站制作一个自动水平滚动提要部分,它正在工作,但小问题是,当动画最终从左到右到达时,会有一些空白,我不知道为什么有人能帮助我?

    这个空白的单词是我用蓝色做的箭头,请帮助我解决这个问题。

    enter image description here

    
    /*insta feed css*/
    
    .bg-black-gradient-feed {
      content: '';
      position: absolute;
      height: 50%;
      top: 50%;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient( transparent, rgba(0 0 0 / 100%) 100%);
      transition: all 2s ease-in-out;
      -webkit-transition: all 2s ease-in-out;
      opacity: 1;
      border-radius: 0px 0px 15px 15px;
    }
    .feed-wrapper {
        overflow: hidden;
        width: 100%;
        height: 600px;
    }
    
    .feed-track {
        display: flex;
        width: calc(210px * 8);
        animation: scroll 30s linear infinite;
    }
    
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        50% {
            transform: translateX(calc(-210px * 4));
        }
        50.01% {
            transform: translateX(calc(-210px * 4));
        }
        100% {
            transform: translateX(0);
        }
    }
    
    .feed-item {
        position: relative;
        width: 210px;
        border-radius: 15px;
        margin: 0 10px;
    }
    
    .feed-item img {
        border-radius: 15px;
    }
    
    .feed-item .feed-content {
        position: absolute;
        bottom: 0;
        width: 100%;
        font-size: 0.75rem;
        line-height: 1rem;
        padding: 1rem;
    }
    
    .feed-item .feed-content .content-wrapper {
        display: flex;
        flex-direction: column;
    }
    
    .feed-item .feed-content .content-wrapper div h2 {
        color: white;
        font-size: 0.75rem;
        line-height: 1.2;
        margin-bottom: 0.3rem;
    }
    
    .feed-item .feed-content .content-wrapper div span {
        display: block;
        color: white;
        font-size: 9px;
    }
    .top-60
    {
        top:60px;
    }
                    <div class="feed-wrapper">
                        <div class="feed-track">
                            <div class="feed-item">
                                <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
                                <div class="bg-black-gradient-feed"></div>
                                <div class="feed-content">
                                    <div class="content-wrapper">
                                        <div style="display: block;">
                                            <h2>Mercedes-Benz AMG: One Of</h2>
                                        </div>
                                        <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                                        <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                                    </div>
                                </div>
                            </div>
                            <!-- Repeat the feed items as needed -->
                            <div class="feed-item">
                                <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
                                <div class="bg-black-gradient-feed"></div>
                                <div class="feed-content">
                                    <div class="content-wrapper">
                                        <div style="display: block;">
                                            <h2>Mercedes-Benz AMG: One Of</h2>
                                        </div>
                                        <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                                        <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="feed-item top-60">
                                <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
                                <div class="bg-black-gradient-feed"></div>
                                <div class="feed-content">
                                    <div class="content-wrapper">
                                        <div style="display: block;">
                                            <h2>Mercedes-Benz AMG: One Of</h2>
                                        </div>
                                        <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                                        <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                                    </div>
                                </div>
                            </div>
                            <!-- Repeat the feed items as needed -->
                            <div class="feed-item">
                                <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
                                <div class="bg-black-gradient-feed"></div>
                                <div class="feed-content">
                                    <div class="content-wrapper">
                                        <div style="display: block;">
                                            <h2>Mercedes-Benz AMG: One Of</h2>
                                        </div>
                                        <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                                        <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="feed-item top-60">
                                <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
                                <div class="bg-black-gradient-feed"></div>
                                <div class="feed-content">
                                    <div class="content-wrapper">
                                        <div style="display: block;">
                                            <h2>Mercedes-Benz AMG: One Of</h2>
                                        </div>
                                        <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                                        <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                                    </div>
                                </div>
                            </div>
                            <!-- Repeat the feed items as needed -->
                            <div class="feed-item">
                                <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
                                <div class="bg-black-gradient-feed"></div>
                                <div class="feed-content">
                                    <div class="content-wrapper">
                                        <div style="display: block;">
                                            <h2>Mercedes-Benz AMG: One Of</h2>
                                        </div>
                                        <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                                        <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="feed-item top-60">
                                <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
                                <div class="bg-black-gradient-feed"></div>
                                <div class="feed-content">
                                    <div class="content-wrapper">
                                        <div style="display: block;">
                                            <h2>Mercedes-Benz AMG: One Of</h2>
                                        </div>
                                        <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                                        <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                                    </div>
                                </div>
                            </div>
                            <!-- Repeat the feed items as needed -->
                            <div class="feed-item">
                                <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
                                <div class="bg-black-gradient-feed"></div>
                                <div class="feed-content">
                                    <div class="content-wrapper">
                                        <div style="display: block;">
                                            <h2>Mercedes-Benz AMG: One Of</h2>
                                        </div>
                                        <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                                        <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                                    </div>
                                </div>
                            </div>
                            <!-- Add more items if necessary -->
                        </div>
                    </div>
    
    1 回复  |  直到 1 年前
        1
  •  0
  •   ilyasbilgihan    1 年前

    首先,的宽度 .feed-track 不正确。应该是 (<项目计数>*210px+<间隙宽度>*<缝隙计数>)

    然后,关键帧也不正确。应该是 (-100%+<包装宽度>)

    因此,正确地实现它们应该可以解决您的问题。

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    .bg-black-gradient-feed {
      content: '';
      position: absolute;
      height: 50%;
      top: 50%;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient( transparent, rgba(0 0 0 / 100%) 100%);
      transition: all 2s ease-in-out;
      -webkit-transition: all 2s ease-in-out;
      opacity: 1;
      border-radius: 0px 0px 15px 15px;
    }
    
    .feed-wrapper {
        overflow: hidden;
        width: 100vw;
        height: 600px;
    }
    
    .feed-track {
        display: flex;
        --item-count: 8;
        --gap: 20px;
        gap: var(--gap);
        padding: var(--gap);
        width: calc(210px * var(--item-count) + (var(--gap) * (var(--item-count) + 1)));
        animation: scroll 30s linear infinite;
    }
    
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        50% {
            transform: translateX(calc(-100% + 100vw));
        }
        100% {
            transform: translateX(0);
        }
    }
    
    .feed-item {
        position: relative;
        width: 210px;
        border-radius: 15px;
    }
    
    .feed-item img {
        border-radius: 15px;
    }
    
    .feed-item .feed-content {
        position: absolute;
        bottom: 0;
        width: 100%;
        font-size: 0.75rem;
        line-height: 1rem;
        padding: 1rem;
    }
    
    .feed-item .feed-content .content-wrapper {
        display: flex;
        flex-direction: column;
    }
    
    .feed-item .feed-content .content-wrapper div h2 {
        color: white;
        font-size: 0.75rem;
        line-height: 1.2;
        margin-bottom: 0.3rem;
    }
    
    .feed-item .feed-content .content-wrapper div span {
        display: block;
        color: white;
        font-size: 9px;
    }
    .top-60
    {
        top:60px;
    }
    <div class="feed-wrapper">
        <div class="feed-track">
            <div class="feed-item top-60">
                <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
                <div class="bg-black-gradient-feed"></div>
                <div class="feed-content">
                    <div class="content-wrapper">
                        <div style="display: block;">
                            <h2>Mercedes-Benz AMG: One Of</h2>
                        </div>
                        <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                        <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                    </div>
                </div>
            </div>
            <!-- Repeat the feed items as needed -->
            <div class="feed-item">
                <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
                <div class="bg-black-gradient-feed"></div>
                <div class="feed-content">
                    <div class="content-wrapper">
                        <div style="display: block;">
                            <h2>Mercedes-Benz AMG: One Of</h2>
                        </div>
                        <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                        <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                    </div>
                </div>
            </div>
            <div class="feed-item top-60">
                <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
                <div class="bg-black-gradient-feed"></div>
                <div class="feed-content">
                    <div class="content-wrapper">
                        <div style="display: block;">
                            <h2>Mercedes-Benz AMG: One Of</h2>
                        </div>
                        <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                        <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                    </div>
                </div>
            </div>
            <!-- Repeat the feed items as needed -->
            <div class="feed-item">
                <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
                <div class="bg-black-gradient-feed"></div>
                <div class="feed-content">
                    <div class="content-wrapper">
                        <div style="display: block;">
                            <h2>Mercedes-Benz AMG: One Of</h2>
                        </div>
                        <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                        <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                    </div>
                </div>
            </div>
            <div class="feed-item top-60">
                <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
                <div class="bg-black-gradient-feed"></div>
                <div class="feed-content">
                    <div class="content-wrapper">
                        <div style="display: block;">
                            <h2>Mercedes-Benz AMG: One Of</h2>
                        </div>
                        <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                        <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                    </div>
                </div>
            </div>
            <!-- Repeat the feed items as needed -->
            <div class="feed-item">
                <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
                <div class="bg-black-gradient-feed"></div>
                <div class="feed-content">
                    <div class="content-wrapper">
                        <div style="display: block;">
                            <h2>Mercedes-Benz AMG: One Of</h2>
                        </div>
                        <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                        <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                    </div>
                </div>
            </div>
            <div class="feed-item top-60">
                <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
                <div class="bg-black-gradient-feed"></div>
                <div class="feed-content">
                    <div class="content-wrapper">
                        <div style="display: block;">
                            <h2>Mercedes-Benz AMG: One Of</h2>
                        </div>
                        <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                        <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                    </div>
                </div>
            </div>
            <!-- Repeat the feed items as needed -->
            <div class="feed-item">
                <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
                <div class="bg-black-gradient-feed"></div>
                <div class="feed-content">
                    <div class="content-wrapper">
                        <div style="display: block;">
                            <h2>Mercedes-Benz AMG: One Of</h2>
                        </div>
                        <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                        <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                    </div>
                </div>
            </div>
            <!-- Add more items if necessary -->
        </div>
    </div>