스크린 세이버 같은 페이지를 만들어 보았습니다.

windows등에서 자주 보는 스크린 세이버를 HTML과 CSS로 만들어 보았습니다.

항상 브라우저의 중앙에 회전하는 「Windows 10」을 배치.

출처

index.html

<p>Windows 10</p>

style.css

body {
  background: #000;
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

p {
  color: #fff;
  font-size: 50px;
  display: inline-block;
  animation: spin 5s infinite linear;
  position :absolute;
  top: 50%;
  left: 50%;
}

@keyframes spin {
  from {
    transform: translate(-50%,-50%) rotateY(0deg);

  }

  to {
    transform: translate(-50%,-50%) rotateY(360deg);

  }
}

해설

html의 텍스트는 좋아하는 문자나 이미지 등을 넣어 주세요.

CSS입니다만, 진짜 스크린 세이버와 마찬가지로, 배경은 검정, 문자는 흰색으로 설정. 문자 사이즈 등도 적당한 크기로 지정.
그 후, position 지정을 사용해, 상하 중앙에 문자를 배치. 이때, body 요소를 윈도우 사이즈 가득과 동등하게 되도록 width나 height를 지정.

통상 상하 중앙이면 p요소에 transform: translate(-50%,-50%); 를 지정하는 것으로 딱 한가운데입니다만, 회전하는 애니메이션으로 transform를 사용하므로 일시 보류.

마지막으로 애니메이션 처리를 하기 위해 @keyframes 를 위와 같이 기술. 이때 상하 중앙으로 시키기 위해 필요한 translate(-50%,-50%) 도 함께 쓴다.

요약

예상했던 것보다 쉽게 ​​만들 수있었습니다.
평소 애니메이션은 별로 사용하지 않기 때문에, 여러가지 작성해 보고 싶네요.

어머니!

~ Qiita에서 매일 게시 중!! ~
【초보자용】HTML・CSS의 조금 테크 모임