窗口缩放时圆形Div消失的响应式动画问题求助

我正在为网页制作一个双圆形小型动画，希望实现响应式效果，当窗口调整为手机尺寸时所有元素仍能正常显示。每个圆形是一个div，均包含在class为animation-container的div中。其他元素均可正常缩放并显示，但圆形div消失了。我尝试调整圆形尺寸但无效，目前不知如何解决。我们使用React和Bootstrap，推测问题与CSS相关。

相关代码 #

JSX 代码 #

import React, { useEffect, useState } from 'react'
import { Container, Form } from 'react-bootstrap'
import useAuth from './useAuth'
import TrackSearchResult from './TrackSearchResult'
import SpotifyWebApi from 'spotify-web-api-node'
import Player from './Player'
import Navbar from './Navbar'
import './Dashboard.css'
const spotifyApi = new SpotifyWebApi({
    clientId: '0d9e02c2d8504b05a8ae26f33b338212',
});

export default function Dashboard({code}) {
    const accessToken = useAuth(code)
    const [search,setSearch] = useState('')
    const [searchResults,setSearchResults] = useState([])
    const [playingTrack, setPlayingTrack] = useState()

    function chooseTrack(track) {
        setPlayingTrack(track)
        // 选择歌曲后清空搜索框
        setSearch('')
    }

    useEffect(()=>{
        if (!accessToken) return
        spotifyApi.setAccessToken(accessToken)
    },[accessToken])

    useEffect(()=>{
        if (!search) return setSearchResults([])
        if (!accessToken) return

        let cancel = false // 确保同一时间只处理一次搜索请求
        spotifyApi.searchTracks(search)
        .then(res => {
            if (cancel) return
            setSearchResults(res.body.tracks.items.map(track => {
                // 遍历专辑图片，获取最小尺寸的图
                const smallestAlbumImage = track.album.images.reduce((smallest, image) => {
                    if (image.height < smallest.height) {
                        return image
                    } else {
                        return smallest
                    }
                }, track.album.images[0])

                return {
                    artist: track.artists[0].name,
                    title: track.name,
                    uri: track.uri,
                    albumUrl: smallestAlbumImage.url
                }
            }))
        })
        return () => cancel = true
    },[search, accessToken])

    return (
    <Container className="d-flex flex-column pt-2 pb-0 px-0" style={{height:"100vh"}}>
        {/* <Form.Control 
        type="search" 
        placeholder="Search Songs/Artists" 
        value={search} 
        onChange={e => setSearch(e.target.value)} 
        /> */}
        <div className="animation-container align-items-center">
            <div
            id="shape-1"
            className="
                    rounded-circle
                    position-absolute
                    opacity-70
                    scale-up-center
                    d-none d-md-block
                    "
            ></div>
            <div
            id="shape-2"
            className="
                    rounded-circle
                    position-absolute
                    opacity-70
                    scale-up-center
                    fade-delay-2000
                    d-none d-md-block
                    "
            ></div>
        </div>
        <div className="song-container">
            <div className="song">song1</div>
            <div className="song">song2</div>
            <div className="song">song3</div>
            <div className="song">song4</div>
        </div>
        <div className="flex-grow-1 my-2" style={{overflowY: "auto"}}>
            {searchResults.map(track =>(
                <TrackSearchResult track={track} key={track.uri} chooseTrack={chooseTrack}/>
            ))}
        </div>
        <div><Player accessToken={accessToken} trackUri={playingTrack?.uri}/></div>
        <Navbar/>
    </Container>
    )
}

CSS 代码 #

.animation-container {
    height: 50vh;
    max-width: 20vh;
    align-items: center;
    justify-content: center;
    display: flex;
    margin: 0 auto;
}

#shape-1,
#shape-2,
{
    min-width: 25vh;
    height: 25vh;
    mix-blend-mode: multiply;
    filter: blur(24px);

}

#shape-1 {
    background-color: hsl(225, 100%, 43%);
    left: 99vh;
}

#shape-2 {
    background-color: hsl(0, 92%, 64%);
    right: 99vh;
}


.scale-up-center {
    animation: scale-up-center 7s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both;
}

@keyframes scale-up-center {
    0% {
        transform: translate(0px, 0px) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }

    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

.fade-delay-2000 {
    animation-delay: 2s;
}

.fade-delay-4000 {
    animation-delay: 4s;
}

.song-container {
    padding: 3em;
    display: grid;
    grid-gap: 2em;
    height: auto;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.song {
    padding: 2em;
    border-radius: .3em;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
    height: 10vh;
    width: auto;
}

修复方案 #

1. 移除移动端隐藏类 #

圆形div上的d-none d-md-block是Bootstrap响应式隐藏类，会在屏幕宽度小于768px时自动隐藏元素。将其替换为d-block，确保所有屏幕尺寸下都能显示：

// 修改后的shape-1和shape-2的className
className="
        rounded-circle
        position-absolute
        opacity-70
        scale-up-center
        d-block
        "

2. 修复CSS语法错误 #

#shape-1, #shape-2,末尾多余的逗号会导致CSS解析失败，移除该逗号：

#shape-1,
#shape-2 {
    min-width: 25vh;
    height: 25vh;
    mix-blend-mode: multiply;
    filter: blur(24px);
}

3. 为父容器添加定位上下文 #

绝对定位的元素需要相对父容器定位，给.animation-container添加position: relative，避免圆形相对于整个页面全局定位：

.animation-container {
    height: 50vh;
    max-width: 20vh;
    align-items: center;
    justify-content: center;
    display: flex;
    margin: 0 auto;
    position: relative; /* 添加此行 */
}

4. 优化移动端定位值 #

原left:99vh和right:99vh在小屏幕会让圆形完全超出视口，改用合适的偏移值，比如：

#shape-1 {
    background-color: hsl(225, 100%, 43%);
    left: -10vh; /* 替换99vh，可根据视觉需求调整 */
}

#shape-2 {
    background-color: hsl(0, 92%, 64%);
    right: -10vh; /* 替换99vh，可根据视觉需求调整 */
}

内容的提问来源于stack exchange，提问作者Eva del Hoyo Ortiz de Zárate