[React] css div 안에서 빙글빙글 돌아가는 이미지

 

리액트로 피클플러스 클론코딩 해보려고 했는데,

div 안에서 빙글빙글 도는 이미지 발견!

너무 이뻐보여서 어떻게 구현해야하나 생각했었는데,,

 

이미 리액트 기본 샘플 페이지에 이미지가 빙글빙글 도는 것이 아닌가!?

바로 힌트 얻어서 css 삽질해가면서 만들어봤다.

 

css는 야매로 배워서 맨날 사용하려면 까먹는다.

나중에 참고해서 써야징 

 

 

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div className="Div_nemo">
          <img src={logo} className="App-logo" alt="logo" />
          <img src={logo} className="App-logo2" alt="logo" />
        </div>

        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
      </header>
    </div>
  );
}

export default App;

 

 

App.css

.App {
  text-align: center;
}

.App-logo {
  position: relative;
  height: 50vmin;
  pointer-events: none;
  display: flex;
  left: 100px;
  top: -40px;
}

.App-logo2 {
  position: relative;
  height: 40vmin;
  pointer-events: none;
  display: flex;
  left: -160px;
  top: -200px;
}

.Div_nemo {
  background-color: white;
  height: 50vmin;
  width: 50vmin;
  border: 0px solid;
  border-radius: 20px;
  box-shadow : 0px 2px 8px -5px #000000;
  overflow: hidden;
}


@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
  .App-logo2 {
    animation: App-logo-spin infinite 60s linear;
  }
}


.App-header {
  background-color: #E1E1E1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: black;
}


@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

 

다시 리액트 복습 후딱 하고 Next.js 공부해봐야겠다..

코딩애플 강의 구매해야지..