css / 样式合成动画背景渐变

Question

您好，我在使用样式组件在渐变 bacgrkound 中制作动画时遇到问题，我不知道我错在哪里：

法典：

import React from "react";
import "./styles.css";
import styled, { css, keyframes } from "styled-components";
const HeaderKeyFrame = keyframes`
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
`;
const Div = styled.div`
height:100vh,
position: relative;
flex: none;
height: 530px;
background-position: top center;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
animation: ${HeaderKeyFrame} 15s ease infinite;
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
`;
export default function App() {
return (
<Div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</Div>
);
}

示例：https://codesandbox.io/s/friendly-swanson-syuln

Answer 1

要更改背景位置，您需要背景的大小大于容器 - 例如background-size: 200% 100%;(沙盒(。

const Div = styled.div`
height: 100vh,
position: relative;
flex: none;
height: 530px;
background-position: top center;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
animation: ${HeaderKeyFrame} 15s ease infinite;
background-size: 200% 100%;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
`;