0

所以我使用 React 创建了一个投资组合网站。我将 CSS 渐变动画应用到 index.html 文件的主体。我总共有 5 页。CSS 渐变在前四页中确实有效。但是当我转到我的项目页面的最后一页时，渐变不适用，它显示我的组件的白色背景，但如果你在网站上摆弄一段时间，那么 CSS 渐变将应用于最后一页。

索引.html

<body>
   <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->

    <script
      src="https://kit.fontawesome.com/1352a67a6e.js"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
  </body>

index.css

body {
  width: 100%;
  height: 100vh;
  color: #fff;
  background: linear-gradient(
    -45deg,
    #b3ffab,
    #12fff7,
    #e6dada,
    #ddd6f3,
    #faaca8,
    #23d5ab,
    #23a6d5
  );
  background-size: 400% 400%;
  position: relative;
  animation: change 10s ease-in-out infinite;
}

@keyframes change {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

projects.js

class Projects extends Component {
  render() {
    return (
      <div className="projects">
        <h1 className="animated slideInDown">My Projects</h1>
        <div className="grid">
          <div className="animated slideInLeft row no-gutters row1">
            <div className="col no-gutters">
              <ProjectsComponent
                title="Burger Builder"
                text="Created a Web application using React and Redux. A web application where one can create an account and build burgers and order them. Technologies used are React router, Thunk, Axios, Jest/Enzyme, WebPack, Bable & Firebase."
                src={bb}
                link="https://burger-builder-application.firebaseapp.com/"
              />
            </div>
9 sections like the above


projects.css

.projects {
  margin-left: 7em;
  margin-top: 2em;
  margin-bottom: 3em;
  overflow: auto;
}

h1 {
  text-align: center;
  color: black;
}

.grid {
  text-align: center;
  justify-content: center;
  align-items: center;
}```
4

0 回答 0