CSS3 학습 페이지 로딩 애니메이션 (2)-CSS 튜토리얼-php.cn

CSS3 학습 페이지 로딩 애니메이션 (2)

青灯夜游

풀어 주다： 2018-10-15 15:51:23

앞으로

2831명이 탐색했습니다.

이 글에서는 6가지 유형의 CSS3 페이지 로딩 애니메이션을 공유하겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이전 글 [CSS3 학습 페이지 로딩 애니메이션(1)]에서 4개의 CSS3 로딩 애니메이션을 공유했는데, 오늘도 계속됩니다(제목은 이전 시간에 이어집니다).

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

다섯째, 효과 5

이 효과를 처음 봤을 때 계단 오르기 효과는 그럴 거라고 생각했습니다. 조금 복잡했지만 써보고 나니 그리 어렵지는 않다는 생각이 들었습니다.

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

{animation: step_mv 1.8s linear infinite;}<br>@keyframes step_mv {<br>      0%{<br>        right: 0;<br>        top: 0;<br>        opacity: 0.6;<br>      }<br>      50%{<br>        opacity: 1;<br>      }<br>      100%{<br>        right: 100%;<br>        top: 100%;<br>        opacity: 0.6;<br>      }<br>    }<br>

로그인 후 복사

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

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

로그인 후 복사

6. 효과 6

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

사각형 p, 테두리와 둥근 모서리를 설정하고 테두리 중 하나의 색상을 상속으로 설정합니다(예: 테두리 왼쪽/아래/위/오른쪽 색상:투명)

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

7. 효과 7

이 효과 모양의 제작은 이번에 추가 테두리가 추가되는 것을 제외하면 이전과 동일합니다. 아직 회전된 상태입니다. 말할 것도 없이 키 프레임 애니메이션 코드로 직접 가보겠습니다.

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

로그인 후 복사

8. 효과 8

이 효과도 매우 간단합니다. 바깥쪽 큰 원의 크기만 바꾸면 됩니다. 내부에.

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

로그인 후 복사

Nine, effect nine

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

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

로그인 후 복사

Ten, effect ten

공을 인라인 블록으로 설정하고 수평으로 중앙에 배치하면 외부 여백을 설정하여 공 사이의 거리를 조정할 수 있습니다. 공의 TranslateY 값을 설정합니다. (각 공 사이의 딜레이를 균등하게 나눌 필요는 없으며 차이를 줄일 수 있습니다)

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

로그인 후 복사

(계속)

오늘은 여기서 공유하고, 나중에 더 많은 내용이 나올 예정입니다. 더 많은 관련 튜토리얼을 보려면 CSS 기본 동영상 튜토리얼 , CSS3 동영상 튜토리얼 , bootstrap tutorial#🎜을 방문하세요. 🎜 #!

위 내용은 CSS3 학습 페이지 로딩 애니메이션 (2)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!