복사 붙여넣기는 간단하다. i+css만 있으면 Loading 포도당을 실현할 수 있는 방법이다.

개요
자바스크립트를 사용하지 않고 복사해서 붙이기만 하면 됩니다) + css의 Loading Group을 사용하시겠습니까?
있다
투고하고 싶은 계기.
작업 때문에 Loading 이미지를 그라데이션하고 싶어요.
물론 IE가 대응하기 때문에 Filter와 mask-image를 사용할 수 없습니다
HTML+css만 15분 정도 제출하면 상대방이'내가 생각했을 때 그랬지!'라고 말하지만, 나는 그럴 생각이 없다.
전 세계 한 사람이라도 역할을 할 수 있다고 생각해서 이 기사를 썼다.
설치 방법은 정말 간단하기 때문에 코드의 내용보다 사고방식이 더 중요할 수 있다
코드를 원하는 사람이 있을 것 같아서 코드를 먼저 꺼내세요.
아래에도 해설이 있다.
Loading 설치
loading

<div class="loading"></div>

loading

@keyframes spin {
  from{
    transform: rotateZ(0deg);         /* アニメーション開始状態 */
  }
  to{
    transform: rotateZ(360deg);       /* アニメーション終了状態 */
  }
}

.loading {
  position: absolute;                 /* 良くわからなければ無くてもよい */
  width: 50px;                        /* 横幅 */
  height: 50px;                       /*  高さ */
  border: 10px solid #dddddd;         /* 線(上下左右)の太さ,形,色 */
  border-top-color: #aaaaaa;          /* 線(上)の色 */
  border-radius: 50%;                 /* 円形 */
  animation: 1s spin infinite linear; /* アニメーション指定(1秒1回転で一定の速度で永遠回るように指定) */
}

네.
대체로 각 속성에 대해 논평을 넣었기 때문에 아는 사람은 나중에 다시 볼 필요가 없다.
※ 의사를 잘 아는 사람에게는 당연한 일일 수 있습니다. 물론 IE도 움직일 수 있습니다.
해설
여기서 본 사람은 >이고 CSS는 상세하지 않습니다. 모르기 때문에 사람을 대상으로 합니다.
포지션에 대해서 기억해야 할 게 많아요.
특히 absolute에 관해서는 지금까지 해설 사이트에서 쓰지 않은 숨겨진 방법이 많다
이전의 엔지니어 중에는 아직 그것을 아는 사람이 없었다.
그 설명은 이번에 한 내용이 아니니 몰라도 돼.
※ 원래 그 숨겨진 방법을 이해할 필요는 없다
먼저

  width: 50px;
  height: 50px;

는 요소의 너비와 높이입니다.
이거 그냥.

  border: 10px solid #dddddd;

아까 지정한 요소의 상하좌우입니다.
10px 선을 #ddd 색상으로 표시하도록 지정합니다.
이렇게 되면 앞의 요소는 종횡으로 교차하는 70px가 된다
(10px(상단)+50px(원소높이)]+10px(밑줄)
(10px(오른쪽 선)+50px(원소의 너비)] +10px(왼쪽 선) 맞죠?

  border-top-color: #aaaaaa;

이것은 방금 설정한 선에만 #aa 색상을 덮어씁니다.
먼저 border 전에border top-color를 쓰면 색깔이 #aaaa에서 #dddd로 덮어씁니다.
나는 이곳이 다음과 같이 변할 것이라고 생각한다.

다음

  border-radius: 50%;

이 지정은 원형으로 수정됩니다.
이 지정은 모든 각도를 지정하는 필렛입니다.
물론 모든 뿔이 흩어져 작게 설정할 수 있지만 이번에는 원형으로 만들어야 하기 때문에 각 뿔은 50%씩 둥글게 만들어야 한다.
35px(전체적인 크기/2)도 쓸 수 있지만 50%면 가로세로로 되어 있고 선의 굵기 변화도 무너지지 않기 때문에 이게 좋을 것 같아요.
나는 이렇게 하면 아래의 원형이 될 것이라고 생각한다.

이거 그 자리에서 돌리면 완성이야.
지정 회전

  animation: 1s spin infinite linear;

네.
이것은 지정한 초당 (1s) 일정한 속도로 영원히 (infinite) 재생하는 spin으로 설정된 애니메이션입니다.
이번에는 끝날 때까지 계속 돌려야 하기 때문에 영원히 (infinite) 로 지정했지만, 회전 횟수도 지정했다고 생각합니다.
(잊어버렸어...)
회전 속도도 일정한 속도(linear)가 있어 그쪽도 변경할 수 있다.
전반전이 빠르고 늦은 것 같아요.
스핀으로 지정된 건 자기가 해야 돼.
애니메이션을 직접 만들어야 하기 때문에 애니메이션에 동적 이름을 넣어야 한다.
이번에는 즉석에서 한 바퀴 돌기 때문에 스핀이라고 명명되었다.
즉석 회전의 지정은 다음과 같다.

@keyframes spin {
  from{
    transform: rotateZ(0deg);         /* アニメーション開始状態 */
  }
  to{
    transform: rotateZ(360deg);       /* アニメーション終了状態 */
  }
}

@keyframes 이후 애니메이션 동작을 설정할 수 있습니다.
더 많은 기능이 있지만 특별히 신경 쓰지 않아도 됩니다. 안심하세요!!
@keyframes 오른쪽에 일련의 애니메이션 이름이 지정됩니다.
이번에는 스핀이니까 아까 애니메이션 속성에 스핀이라고 썼어요.
from은 애니메이션을 시작할 때의 상태입니다
to 애니메이션이 끝날 때의 상태를 지정합니다.
transform은 요소의 변형을 지정할 때rotateZ는 Z축을 축으로 회전 각도를 지정합니다.
이번 시작은 0도, 끝은 360도였다.
원형의 각도가 360도이기 때문에 시작과 끝 상태가 같아도 이 기간(이번에는 1초가 걸렸다)에는 각도가 달라지기 때문에 제자리에서 회전하는 것처럼 보인다.
이번에는 시계 반대 방향으로 회전 to
transform: rotateZ(-360deg);
그랬으면 좋겠어요.
이것이 바로 애니메이션 속성입니다. 영원히 초당 한 번씩 회전시킬 수 있습니다!!
최후
일단 여기까지 읽어주셔서 감사합니다.
그리고 일본어가 졸렬하고 표현이 잘 안 되는 부분도 있는 것 같아서 죄송합니다.
이번엔 간단한 Loading이지만 더 신경 쓰는 걸 i+css로만 표현할 수 있어요.
나도 CSS를 배우는 것을 매우 좋아한다. 특히 (i5+css3)만 보고 애니메이션을 하는 것을 좋아한다.
나는 일반적인 프론트 엔지니어보다 조금 익숙하다고 생각하는데, 정말 이상한 사람이야.
지금은 자바스크립트를 통해 요소를 바꾸지 않더라도 CSS로 디자인을 다 표현할 수 있기 때문에 더 열심히 공부하고 싶다.
나는 다시는 이런 보도에 대해 필요하거나 투고를 잊어버리고 싶다.
다시 한 번 열람해 주셔서 감사합니다!!