IT 일기장

[HTML&CSS] 구글 이스터에그 do a barrel roll 구현 본문

프로그래밍 언어/HTML&CSS

[HTML&CSS] 구글 이스터에그 do a barrel roll 구현

뽕슈 2023. 8. 9. 00:28
반응형

검색하다 우연히 구글 검색에 관한 이스터에그를 발견하게 됐는데 그 중 하나인 "do a barrel roll"이다.

구글 검색 이스터에그 검색하면 재밌는 기능들이 숨어있더라~

공공기관 프로젝트 하면서 항상 정적인 것들만 다뤄서 심심했는데 이런거보면 또 재밌다.

아무튼 "do a barrel roll"이라는 단어를 구글에서 검색하면 아래 화면처럼 검색 결과 화면이 360도 돈다.

별거 아니지만 신기해서 비슷하게 구현을 해봤다.

 

 

어떻게 화면이 돌아가는지에 대한 원리만 알면되니까. 간단하게 div 영역잡고 해보자.

  <body>
    <div class="content">
      <h1>welcome to "do a barrel roll"~</h1>
    </div>
  </body>

content class에 양념칠 해보자. CSS를 잘 몰라서 가운데 영역잡고 테두리랑 배경색 칠해주고 글자만 좀 크게..

  .content {
    margin: 50px;
    padding: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    text-align: center;
  }

  h1 {
    font-size: 30px;
    color: #333;
    margin-bottom: 20px;
  }

화면 돌아가는건 CSS의 animation과 keyframes 속성을 주면된다.

keyframes에 별칭 지어주고 360도 돌아가게끔 rotate 값 매기고 body에 animation 속성주고 시간 간격과

옵션 넣어주면 그럴싸하게 구현완료~

  body {
    animation: barrelRoll 2s ease infinite;
  }
  @keyframes barrelRoll {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

아래는 결과 화면이다.

See the Pen Google Easter eggs - do a barrel roll by BBongSu (@BBongSu-the-animator) on CodePen.

반응형
저작자표시

'프로그래밍 언어 > HTML&CSS' 카테고리의 다른 글

[HTML&CSS] input type number maxlength 적용하기  (1) 2024.09.02
[CSS] 상단 여백 조절  (0) 2021.12.14
[HTML&CSS] CSS Selectors - 2  (0) 2021.12.05
[HTML&CSS] CSS Selectors  (0) 2021.12.04
[HTML&CSS] CSS Tutorial  (0) 2021.12.04
'프로그래밍 언어/HTML&CSS' Related Articles more
Comments