React中使用css调用函数时滑动图像

Question

假设我想让

Logo

从顶部滑下来，我该怎么做？

//App.js
import React, {useState, useEffect} from 'react';
import styled from 'styled-components';

import img from './img/img.png'

const Logo = styled.div`
   background-image: url(${img});
   width: 100px;
   height: 100px;
   top: 0;
   left: 0;
   position: fixed;
`

function App.js {

   return(
      <><Logo/></>
   )
}

Answer 1

您可以尝试以下方法：

import React from 'react';
import styled, { keyframes } from 'styled-components';

const slideDown = keyframes`
  0% {
    top: -100px; /* Initial position above the viewport */
  }
  100% {
    top: 0; /* Final position at the top of the viewport */
  }
`;

const Logo = styled.div`
  background-image: url(https://placehold.co/600x400/png);
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  position: fixed;
  animation: ${slideDown} 1s ease; /* Use the slideDown animation */
`;

function App() {
  return (
    <div>
      <Logo />
      <div style={{ height: '2000px' }}>Scroll down to see the animation</div>
    </div>
  );
}

export default App;