CSS3 로딩 그래픽 및 텍스트 예제 로딩

CSS3의 적용 범위가 점점 더 넓어지고 있습니다. 특히 Google Chrome이 IE를 점차 대체하고 있기 때문에 더욱 그렇습니다.

오늘 저는 모든 분들께 특별히 CSS3 로딩 효과를 추천합니다

물론 순수한 CSS3가 아닐 수도 있습니다. 모호한 부분이 있지만 가끔씩 무시할 수 있는 js입니다

첨부 파일은 28가지의 다양한 로딩 효과를 제공하며, 호환성 문제를 고려하지 않고 모바일 웹 페이지의 일부 모듈의 로딩 효과로 무엇이든 선택할 수 있습니다. :

1. 헤더의 CSS 스타일과 JS를 웹페이지에 도입하세요

2. 원하는 로딩 효과를 선택하고 HTML을 웹페이지에 복사하세요

(색인 하단의 JS를 놓치지 않도록 주의하세요. html)

Seventeen, effect Seventeen

세 개의 작은 공이 세로 중앙에 넓은 간격으로 차례로 변경됩니다.

@keyframes leap_ball {  50% {
        transform: translateY(60px);
      }}

Eighteen, effect sixteen

세 개의 작은 공이 모두 수평 및 수직 방향으로 중앙에 위치하며 외부 여백을 사용하여 공 사이의 거리를 넓힙니다. 효과 관점에서 보면 왼쪽과 오른쪽에 있는 두 개의 작은 공이 가운데 공 주위를 공전하고 있습니다. 그런 다음 작은 공의 상위 요소를 직접 회전시켜 양쪽에 있는 작은 공의 주변 효과를 얻을 수 있습니다. 상위 요소는 둥글기 때문에 회전하므로 중간 공이 회전하는 것으로 볼 수 없으며 중간 공의 위치는 시각적으로 변경되지 않습니다.

@keyframes wind_ball {  50% {
        transform: rotateZ(180deg);
      }  100% {transform: rotateZ(360deg);
      }}

Nineteen, Effect Nineteen

총 5개의 공이 있지만 각 공의 애니메이션이 지연됩니다. 다르기 때문에 공의 위치가 다릅니다. 5개의 공을 통일된 시작점과 같은 위치에 배치합니다. (여기서는 5개의 공을 가장 오른쪽에 배치했습니다.)

{animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}@keyframes cool_ballP {  80% {
        right: 75%;    //到达终点，开始返回起点      }}
@keyframes cool_ballS {  80% {               //到达终点
        top: 25%;width: 20px;height: 20px;
      }  81% {               //开始返回起点，长度变大，宽度变小，模拟移动产生的形变top: 0;width: 25px;height: 15px;
      }  99% {               //到达起点top: 0;width: 25px;height: 15px;
      }   100% {             //恢复初始width: 20px;height: 20px;
      } 
    }

20, 효과20

총 8개의 작은 공이 원 안에 위치하며, 작은 공의 너비와 높이만 변경하면 됩니다(원의 중심인 작은 공의 변화를 유지하려면 벤치마크로 작은 공)

{animation: load_ball 1.6s linear infinite;}@keyframes load_ball {  50% {
        height: 0;width: 0;
      }  80% {height: 0;width: 0;
      }}

스물하나, 효과 스물하나

총 3개의 작은 공이 있고, 각 작은 공의 이동 궤적은 여전히 ​​동일합니다. 여기서는 3개의 작은 공의 중심을 수직 상단에 배치하고, 수평 중앙으로 이동한 후 3단계로 나누어 먼저 오른쪽 하단으로 이동한 다음 왼쪽 하단으로 이동하고 마지막으로 시작점으로 돌아옵니다.

(각 스테이지 중간쯤 시점에서 투명도 변경이 추가됩니다)

@keyframes triangle_ball {  16% {
        opacity: .6;
      }  33% {left: 100%;top: 100%;opacity: 1;
      }  50% {opacity: .6;
      }  66% {left: 0;top: 100%;opacity: 1;
      }  83% {opacity: .6;
      }  99% {top: 0;left: 50%;opacity: 1;
      }}

Twenty-two, effect 22

이와 비슷합니다 a 회전하는 기어의 경우 기어의 모양을 어떻게 만드는지가 관건인데, div 내부에 원을 만들어 테두리를 구현하고, div의 유사 클래스 점선 테두리 외부에 톱니를 만들어줍니다. 유사 클래스의 경계는 톱니 모양이 희박할수록 밀도가 높아집니다.

기어가 만들어졌으니 이제 남은 것은 작은 회전 케이스뿐입니다.

rreee

위 내용은 CSS3 로딩 그래픽 및 텍스트 예제 로딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!