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%;（sandbox）。

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%);
`;

CSS / Styled Comp动画背景渐变

1 个答案: