CSS动画实现滚动文本环绕中心元素的方案问询

可以实现你要的文本环绕中心div的滚动效果，核心是利用CSS的shape-outside属性让文本流避开中心元素，同时调整布局为多列文本流，而非独立的三列容器。以下是修改后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation</title>
    <style>
        :root {
            --color-red: #E3120B;
            --color-beige: #F5F4EF;
            --color-grey: #1A1A1A;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            box-sizing: border-box;
            background-color: var(--color-beige);
        }
        
        .scroll-container {
            height: 80%;
            width: 70%;
            overflow: hidden;
            position: relative;  
            font-family: 'Inconsolata', monospace;
            color: var(--color-grey);
            font-size: 10pt;
            line-height: 15pt;
            columns: 3;
            column-gap: 20px;
            padding: 0 10px;
            background-color: var(--color-beige);
        }

        .center-box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50%;
            height: 20%; 
            background-color: white;
            font-size: 26px;
            opacity: 0;
            animation: fadeIn 2s forwards;
            animation-delay: 5s;
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            /* 关键：定义文本环绕的形状 */
            shape-outside: inset(calc(50% - 10%) calc(50% - 25%) calc(50% - 10%) calc(50% - 25%));
            pointer-events: none;
        }

        .scroll-text-wrapper {
            position: absolute;
            top: 0;
            width: 100%;
            animation: scroll 8s linear infinite;
        }

        .scroll-text-wrapper-2 {
            animation-delay: 4s;
        }

        @keyframes scroll {
            0% {
                transform: translateY(100%);
            }
            100% {
                transform: translateY(-100%);
            }
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
                /* 初始时不影响文本布局 */
                shape-outside: inset(0 0 0 0);
            }
            100% {
                opacity: 1;
                shape-outside: inset(calc(50% - 10%) calc(50% - 25%) calc(50% - 10%) calc(50% - 25%));
            }
        }
    </style>
</head>
<body>
    
    <div class="scroll-container">
        <div class="center-box">Some text</div> 
        <div class="scroll-text-wrapper">
            <div class="scroll-content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit ex nec nisi congue, eu commodo eros finibus. Sed consectetur, ipsum nec posuere sagittis, dolor risus venenatis ipsum, et feugiat massa nibh eu erat. Maecenas pharetra ullamcorper massa, dapibus lobortis justo congue vel. Etiam sagittis egestas ex vel finibus. Mauris bibendum tellus risus, at fermentum nisi feugiat sed. Suspendisse at nunc quis magna pulvinar sollicitudin. Fusce vestibulum venenatis felis, in imperdiet diam porttitor ac. Vestibulum eu enim neque. Suspendisse potenti. Mauris maximus scelerisque tellus sed placerat. Maecenas fringilla nisi a metus eleifend, ac lobortis quam sollicitudin. Nulla molestie fringilla metus quis tristique. In fringilla fringilla ante quis porta. Nunc sed elit accumsan, blandit massa vel, fringilla mi. Mauris venenatis mauris tristique diam pharetra, a efficitur nulla mattis. Aenean ut ornare est, eu congue turpis. Quisque sit amet sapien at urna pretium imperdiet. Nam dignissim eros sit amet nulla semper, non scelerisque elit dapibus. Praesent consequat nibh a laoreet lobortis. Donec diam orci, volutpat non urna vitae, eleifend blandit leo. Aliquam interdum nec turpis vitae fringilla. In hac habitasse platea dictumst. Donec faucibus tincidunt tellus, vitae egestas sapien interdum eget. Pellentesque semper sagittis pharetra. Duis ornare sollicitudin ligula dictum sagittis. Praesent luctus iaculis est, eu bibendum sem egestas porttitor. Morbi non pretium tellus. Cras in libero vel lectus tempus tincidunt eu sed lorem. Pellentesque consequat ullamcorper arcu, efficitur commodo erat ultricies eu. Nunc viverra pharetra augue, et pellentesque lacus accumsan sed.
                Fusce a egestas sapien. Vivamus in blandit mi, a facilisis nisl. Integer convallis nec risus eu posuere. Vivamus eros lacus, eleifend vitae nunc eget, rhoncus ultricies ex. In tristique ut arcu quis sollicitudin. Mauris lacinia in nisi cursus molestie. Donec mollis a ex ac dictum. Mauris malesuada mi nec justo auctor, quis pretium mi auctor. Maecenas nunc odio, commodo nec lobortis non, consectetur sit amet elit.Quisque condimentum lacinia nunc id elementum. Cras at sem arcu. Pellentesque posuere non dolor ac gravida. Duis tincidunt turpis nisl, vel consequat felis tempor sagittis. Aliquam justo massa, lacinia eu mi eget, convallis porttitor ipsum. Duis id orci rhoncus, elementum felis at, rutrum quam. Suspendisse at nisl massa. Nulla nisi tortor, porttitor non aliquam non, iaculis ut arcu. Integer purus lacus, tincidunt sit amet congue id, consequat sed odio. Nullam interdum auctor est sit amet laoreet. Suspendisse nec fermentum dolor, ut bibendum magna. Mauris pretium rutrum velit, vel blandit quam euismod et.
                Aenean mollis lectus eu magna elementum efficitur. Phasellus ut nunc nec dui mollis dictum non in sapien. Nulla a euismod velit. Pellentesque placerat nisl lectus, eget pretium risus vestibulum venenatis. Donec ipsum ipsum, dignissim id justo nec, aliquam sagittis turpis. Cras vehicula sed arcu non ultricies. Donec ante felis, scelerisque finibus lectus vitae, porttitor scelerisque justo. Sed volutpat viverra lacus, quis scelerisque eros vehicula at. Nam posuere elit non dui placerat, ac tempus nunc imperdiet. Aenean et commodo enim, et gravida orci. Aenean quis eros vel nibh efficitur iaculis. Quisque iaculis bibendum efficitur. Donec sed odio quis lectus dignissim faucibus. Integer consequat aliquam aliquet. Suspendisse a enim ullamcorper, convallis odio vel, feugiat enim. Mauris lectus mi, elementum ac fringilla vulputate, consectetur ut ante. Vestibulum a pharetra augue. Sed dignissim, enim ac euismod rutrum, leo lectus dapibus orci, non ultrices leo lorem et lectus. Duis eu massa vitae ex vehicula consectetur. Curabitur nisi dui, ultrices id viverra id, pretium ac augue. Maecenas ac velit pellentesque, condimentum felis lobortis, venenatis velit. Phasellus facilisis felis enim, eget interdum dui tincidunt quis.
            </div>
        </div>
        <div class="scroll-text-wrapper scroll-text-wrapper-2">
            <div class="scroll-content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit ex nec nisi congue, eu commodo eros finibus. Sed consectetur, ipsum nec posuere sagittis, dolor risus venenatis ipsum, et feugiat massa nibh eu erat. Maecenas pharetra ullamcorper massa, dapibus lobortis justo congue vel. Etiam sagittis egestas ex vel finibus. Mauris bibendum tellus risus, at fermentum nisi feugiat sed. Suspendisse at nunc quis magna pulvinar sollicitudin. Fusce vestibulum venenatis felis, in imperdiet diam porttitor ac. Vestibulum eu enim neque. Suspendisse potenti. Mauris maximus scelerisque tellus sed placerat. Maecenas fringilla nisi a metus eleifend, ac lobortis quam sollicitudin. Nulla molestie fringilla metus quis tristique. In fringilla fringilla ante quis porta. Nunc sed elit accumsan, blandit massa vel, fringilla mi. Mauris venenatis mauris tristique diam pharetra, a efficitur nulla mattis. Aenean ut ornare est, eu congue turpis. Quisque sit amet sapien at urna pretium imperdiet. Nam dignissim eros sit amet nulla semper, non scelerisque elit dapibus. Praesent consequat nibh a laoreet lobortis. Donec diam orci, volutpat non urna vitae, eleifend blandit leo. Aliquam interdum nec turpis vitae fringilla. In hac habitasse platea dictumst. Donec faucibus tincidunt tellus, vitae egestas sapien interdum eget. Pellentesque semper sagittis pharetra. Duis ornare sollicitudin ligula dictum sagittis. Praesent luctus iaculis est, eu bibendum sem egestas porttitor. Morbi non pretium tellus. Cras in libero vel lectus tempus tincidunt eu sed lorem. Pellentesque consequat ullamcorper arcu, efficitur commodo erat ultricies eu. Nunc viverra pharetra augue, et pellentesque lacus accumsan sed.
                Fusce a egestas sapien. Vivamus in blandit mi, a facilisis nisl. Integer convallis nec risus eu posuere. Vivamus eros lacus, eleifend vitae nunc eget, rhoncus ultricies ex. In tristique ut arcu quis sollicitudin. Mauris lacinia in nisi cursus molestie. Donec mollis a ex ac dictum. Mauris malesuada mi nec justo auctor, quis pretium mi auctor. Maecenas nunc odio, commodo nec lobortis non, consectetur sit amet elit.Quisque condimentum lacinia nunc id elementum. Cras at sem arcu. Pellentesque posuere non dolor ac gravida. Duis tincidunt turpis nisl, vel consequat felis tempor sagittis. Aliquam justo massa, lacinia eu mi eget, convallis porttitor ipsum. Duis id orci rhoncus, elementum felis at, rutrum quam. Suspendisse at nisl massa. Nulla nisi tortor, porttitor non aliquam non, iaculis ut arcu. Integer purus lacus, tincidunt sit amet congue id, consequat sed odio. Nullam interdum auctor est sit amet laoreet. Suspendisse nec fermentum dolor, ut bibendum magna. Mauris pretium rutrum velit, vel blandit quam euismod et.
                Aenean mollis lectus eu magna elementum efficitur. Phasellus ut nunc nec dui mollis dictum non in sapien. Nulla a euismod velit. Pellentesque placerat nisl lectus, eget pretium risus vestibulum venenatis. Donec ipsum ipsum, dignissim id justo nec, aliquam sagittis turpis. Cras vehicula sed arcu non ultricies. Donec ante felis, scelerisque finibus lectus vitae, porttitor scelerisque justo. Sed volutpat viverra lacus, quis scelerisque eros vehicula at. Nam posuere elit non dui placerat, ac tempus nunc imperdiet. Aenean et commodo enim, et gravida orci. Aenean quis eros vel nibh efficitur iaculis. Quisque iaculis bibendum efficitur. Donec sed odio quis lectus dignissim faucibus. Integer consequat aliquam aliquet. Suspendisse a enim ullamcorper, convallis odio vel, feugiat enim. Mauris lectus mi, elementum ac fringilla vulputate, consectetur ut ante. Vestibulum a pharetra augue. Sed dignissim, enim ac euismod rutrum, leo lectus dapibus orci, non ultrices leo lorem et lectus. Duis eu massa vitae ex vehicula consectetur. Curabitur nisi dui, ultrices id viverra id, pretium ac augue. Maecenas ac velit pellentesque, condimentum felis lobortis, venenatis velit. Phasellus facilisis felis enim, eget interdum dui tincidunt quis.
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>

关键修改说明 #

1. 布局调整：将原来的三列独立容器改为单容器多列布局，用columns: 3实现自动分栏，让文本成为连续流，为环绕效果打基础。
2. 文本环绕实现：给.center-box添加shape-outside属性，定义文本需要避开的区域，正好匹配中心div的尺寸和位置；同时在淡入动画中同步切换该属性，确保中心div出现前文本正常布局。
3. 滚动逻辑优化：将原来的三列独立滚动合并为整个文本流的滚动，保持双文本块的无限滚动逻辑，确保动画连续无断点。
4. 交互兼容：添加pointer-events: none避免中心div干扰文本的滚动交互（可选）。

内容的提问来源于stack exchange，提问作者Jurgita-ds