如何修改::before伪元素的旋转中心以实现div动画边框？

问题分析 #

当前核心问题在于：.wrapper::before伪元素同时设置了height:1000px和top/right/bottom/left: 0，这会导致伪元素被容器强制拉伸变形，且旋转中心是伪元素自身的中心，而非外层.wrapper的中心。这种定位逻辑冲突，直接导致“以wrapper中心旋转且覆盖边缘”的需求无法实现。

解决方案 #

修改.wrapper::before的定位与尺寸逻辑，让伪元素以.wrapper中心为旋转点，同时保持足够大的尺寸覆盖边缘：

.wrapper::before {
    position: absolute;
    /* 定位到wrapper中心位置 */
    left: 50%;
    top: 50%;
    /* 设置足够大的宽高，确保能覆盖容器边缘 */
    width: 1000px;
    height: 1000px;
    /* 反向平移自身宽高的一半，让旋转点落在wrapper中心 */
    transform: translate(-50%, -50%);
    background: linear-gradient(to right, rgb(255, 0, 0), rgb(145, 255, 0), rgb(189, 1, 180));
    animation: rotate 3s linear infinite;
    content: '';
    border-radius: 20px;
    /* 让伪元素在内容下方，不遮挡交互与显示 */
    z-index: -1;
}

同时调整.wrapper的样式，排查完成后恢复溢出隐藏，只显示符合圆角的边框区域：

.wrapper {
    border-radius: 20px;
    padding: 4px;
    overflow: hidden;
}

关键调整说明 #

• 用left:50%+top:50%+transform: translate(-50%, -50%)的组合，实现伪元素绝对居中，旋转中心自然对齐.wrapper的中心。
• 移除top/right/bottom/left:0的定位方式，避免容器拉伸伪元素，保证自定义宽高生效。
• 给伪元素设置z-index:-1，确保它在内容模块下方，不影响页面交互。
• 恢复.wrapper的overflow:hidden，可以自动裁剪超出容器的伪元素部分，只显示符合圆角的边框效果。

完整代码参考 #

HTML部分

<div class="center">
    <div class="wrapper">
        <div class="directory module">
            <div id="header" class="small_wrapper center">
                <div class="module">
                    <p style="font-size: 22px">Placeholder</p>
                </div>
            </div>
            <div class="directory_bar small_wrapper center"><div class="module">About Me</div></div>
            <div class="directory_bar small_wrapper center"><div class="module">PC Builds</div></div>
            <div class="directory_bar small_wrapper center"><div class="module">Original Characters</div></div>
            <div class="directory_bar small_wrapper center"><div class="module">Games & Loadouts</div></div>
            <div class="directory_bar small_wrapper center"><div class="module">Socials</div></div>
        </div>
    </div>
</div>

CSS部分

@charset "utf-8";
    
@keyframes rotate {
    0% {
      transform: rotate(0);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

html {
    font-size: 3.0vh;
}

body {
    background-color: #2C2C2C;
    font-family: Urbanist, sans serif;
    color: white;
}

p {
    margin: 0;
}

.left, .right, .center {
    position: relative;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.module {
    background-color:#2C2C2C;
    text-align: center;
    padding: 10px;
    border-radius: 18px;
    z-index: 1000;
    position: relative;
}

.wrapper, .small_wrapper {
    position: relative;
    width: fit-content;
    height: fit-content;
    background: blue;
    z-index: 1000;
}

.wrapper {
    border-radius: 20px;
    padding: 4px;
    overflow: hidden;
}

.wrapper::before {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1000px;
    height: 1000px;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right, rgb(255, 0, 0), rgb(145, 255, 0), rgb(189, 1, 180));
    animation: rotate 3s linear infinite;
    content: '';
    border-radius: 20px;
    z-index: -1;
}

.small_wrapper {
    padding: 3px;
}

.directory_bar {
    margin-top: 5vh;
}

.directory {
    padding: 5vh;
}

.center > .wrapper {
    margin-left: 100px;
}

.directory_bar, #header {
    border-radius: 8px;
}

.directory_bar > .module, #header > .module {
    border-radius: 7px;
}

内容的提问来源于stack exchange，提问作者StrugglingFrontEnd