읽기 효과의 CSS3 애니메이션 구현

저번에 CSS3 로딩 애니메이션 4개를 공유했는데, 오늘 계속됩니다(제목은 지난번에 이어서 이어집니다).

온라인 데모: http://liyunpei.xyz/loading.html (지속적으로 업데이트됨)

참고: 코드의 키프레임 애니메이션 중 일부는 선형 곡선을 사용하고 다른 키프레임 애니메이션은 완화 곡선을 사용합니다. 전자는 일정한 속도로 실행되고, 전체 애니메이션은 고정된 속도로 실행됩니다. 후자는 애니메이션 시작 시 가속되고 애니메이션이 끝나려고 할 때 감속하는 가속 및 감속 단계를 갖습니다. 애니메이션을 50%로 설정한 후 50%%에 가까워지면 애니메이션이 느려지기 시작하고, 50%를 초과하면 애니메이션이 가속되기 시작합니다. 이는 짧은 체류 효과에 반영됩니다. 7번과 8번 효과가 가장 눈에 띕니다.)

다섯째, 효과 5

이 효과를 처음 봤을 때 계단 오르기의 효과라고 생각했습니다. 조금 복잡할 텐데, 쓰고 나니 그리 어렵지는 않다는 생각이 들었습니다.

먼저 계단을 오른쪽 상단에 위치시키고, 오른쪽 상단에서 왼쪽 하단으로 모션 애니메이션을 실행한 후 각 계단의 애니메이션 지연 값을 설정합니다. 애니메이션 지연 값은 각각 0초, -0.6초, -12초입니다.)

{:;:;:;
      }{:;
      }{:;:;:;
      }

두 번째로 공은 이 접촉점을 최저 기준점으로 사용합니다. 동시에 공이 오르락내리락하는 동안 공의 너비와 높이를 변경해 보세요. 공 애니메이션의 이동 시간은 정확히 계단 애니메이션의 지연 시간이므로 공이 각 계단에 닿을 수 있습니다.

{animation: jump .6s 0s ease infinite,jump_S .6s 0s ease infinite;}@keyframes jump {  50%{
        top: 60%;
      }}
    @keyframes jump_S {  5%{
        height: 25px; //下降过程width: 15px;
      }  54%{height: 20px;//到达底部width: 20px;
      }  55%{height: 25px;//上升过程width: 15px;
      }  98%{height: 20px;//到达顶点width: 20px;
      }}

6. 효과 6

이 효과는 비교적 간단합니다.

직사각형 div, 테두리와 둥근 모서리를 설정하고 테두리 중 하나의 색상을 상속으로 설정합니다(예: border-left/bottom/top/right-color:transparent).

이런 방식으로 부모는 요소에는 테두리 색상이 없습니다. 이쪽 테두리는 무색이며 간격이 있는 원을 형성합니다. 다음으로 회전 애니메이션을 설정하면 됩니다. (코드는 게시되지 않습니다)

7. 효과 7

이 효과 모양의 제작은 이전 것과 동일하지만 이번에는 추가 테두리가 있습니다. 추가되고 회전됩니다. 더 이상 말하지 않겠습니다. 키 프레임 애니메이션 코드로 이동하세요.

{animation: rotate_bors 2s ease infinite;}//大圆
{animation: rotate_bors 1s ease infinite;}//小圆@keyframes rotate_bors {  50%{
        transform: rotateZ(180deg);
      }  100%{transform: rotateZ(360deg);
      }}

8. 효과 8

이 효과도 매우 간단합니다. 내부의 작은 원의 크기를 변경하면 됩니다.

{animation: rotate_borw 1s linear infinite;}@keyframes rotate_borw {  50%{
        width: 15px;height: 15px;
      }}

Nine, effect nine

모든 공을 인라인 블록 요소로 설정하고, 상위 요소에 text-align: center 공을 수평으로 중앙에 배치하고 Set을 통과시킵니다. 공을 수직으로 중심에 두는 행 높이입니다. 다음으로 키프레임 애니메이션을 사용하여 공의 길이, 너비, 왼쪽 및 오른쪽 여백을 변경합니다.

{animation: margin 1s linear infinite;}@keyframes margin {  50%{
        margin:0 10px;width: 10px;height: 10px;
      }}

Ten, effect ten

여전히 공을 인라인 블록으로 설정하고 수평 중앙에 놓으세요. 외부 여백을 설정하여 공 사이의 거리를 조정할 수 있습니다. 공 거리를 설정하고 키 프레임을 통해 공의 이동 값을 설정합니다. (각 공 사이의 지연 시간을 똑같이 나눌 필요는 없으며 차이를 줄일 수 있습니다)

{animation: trans 1.2s ease infinite;}@keyframes trans {  50%{
        opacity: 1;transform: translateY(30px);
      }  70%{opacity: 1;transform: translateY(30px);
      }  100%{opacity: 0;transform: translateY(60px);
      }}

(계속)

위 내용은 읽기 효과의 CSS3 애니메이션 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!