如何通过styled component样式参数实现旋转动画角度偏移？

你的问题核心是没有让自定义属性--angle的动画起始值和传入的offsetAngle关联起来，同时动画的目标值需要结合偏移量保证循环流畅，另外代码里还有语法错误需要修正。

修改后的Styled Components代码 #

import styled, { keyframes, css } from 'styled-components'
import * as colors from './colorSheet.js';

const spacing = {
    small:  '0.5em',
    medium: '1.0em',
    large:  '1.5em',
    xlarge: '2.0em'  
}
  
const size = {
    thin:   '0.1em',
    small:  '0.5em',
    normal: '1.0em',
    large:  '1.5em'
}

export const AppContainer = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100vw;
    height: 100vh;

    background-color: ${colors.black};

    position: relative;
    z-index: -5;
`;

export const Box = styled.div`
    --offset-angle: ${props => props.offsetAngle}deg;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 160px;
    height: 160px;
    border-radius: 15px;
    margin: 0 20px; /* 增加间距，方便观察两个Box */

    color: ${colors.white};
    background-color: ${colors.night};
    
    position: relative;

    &:after, &:before {
        content: '';
        height: 100%;
        width: 100%;
        border-radius: 15px;
        background: linear-gradient(var(--angle), #ff3baf, #3b45ff);
        padding: 6px;
        position: absolute;
        z-index: -1;
        animation: rotate 3s linear infinite;
    }

    &:before {
        filter: blur(1.5em);
        opacity: 0.5;
    }

    @property --angle {
        syntax: "<angle>";
        initial-value: var(--offset-angle); /* 初始角度设为传入的偏移量 */
        inherits: false;
    }

    @keyframes rotate {
        to {
            --angle: calc(var(--offset-angle) + 360deg); /* 动画目标为偏移量+360度，保证循环流畅 */
        }
    } /* 补上缺失的闭合大括号 */
`;

关键改动说明 #

• 修正自定义属性关联：将--angle的初始值设置为var(--offset-angle)，让每个Box的旋转动画从传入的偏移角度开始
• 调整动画目标值：动画终点改为calc(var(--offset-angle) + 360deg)，这样每个Box的动画都是从偏移角度旋转一整圈，循环时不会出现跳变
• 修复语法错误：补上@keyframes rotate缺失的闭合大括号，避免样式解析失败
• 优化布局：给Box增加margin: 0 20px，方便直观对比两个Box的动画偏移效果

效果验证 #

现在两个Box的旋转边框动画会始终保持180度偏移：第一个从0度开始旋转，第二个从180度开始旋转，两者的渐变色彩位置始终相反，完全符合你的需求。

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