CSS3 애니메이션이 "..." 로딩 애니메이션 효과를 구현하는 방법 정보(2)

박스 섀도우로 구현한 도트 효과

소개

박스 섀도우는 이론적으로 모든 그래픽 효과를 생성할 수 있으며, 물론 도트별 구현도 가능합니다. 도트 로딩이 작동했습니다.

구현 원칙

html 코드, 먼저 다음 HTML 코드와 class클래스 이름:

订单提交中<span class="dotting"></span>

css 코드

.dotting {
    display: inline-block; min-width: 2px; min-height: 2px;
    box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor; /* for IE9+, ..., 3个点 */
    animation: dot 4s infinite step-start both; /* for IE10+, ... */
    *zoom: expression(this.innerHTML = '...'); /*  for IE7. 若无需兼容IE7, 此行删除 */
}
.dotting:before { content: '...'; } /* for IE8. 若无需兼容IE8, 此行以及下一行删除*/
.dotting::before { content: ''; } /* for IE9+ 覆盖 IE8 */
:root .dotting { margin-right: 8px; } /* for IE9+,FF,CH,OP,SF 占据空间*/

@keyframes dot {
    25% { box-shadow: none; }                                  /* 0个点 */
    50% { box-shadow: 2px 0 currentColor; }                    /* 1个点 */
    75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor;  /* 2个点 */ }
}

를 작성해야 합니다.

여기서는 currentColor 브라우저에서 지원되는 IE9+ 키워드를 사용하여 CSS에서 생성된 그래픽의 색상이 환경의 속성 값과 동일하도록 합니다. 즉, 텍스트 색상과 동일합니다.

각 브라우저에서 얻을 수 있는 효과는 그림과 같습니다.

단점

거의 모든 브라우저가 갖고 있지만 보기에는 좋지만 효과 측면에서 여전히 결함이 있습니다. CSS 코드가 상자 그림자 흐림을 설정하지 않았지만 IE10+ 및 FireFox 브라우저 아래의 점 가장자리가 약간 흐릿합니다(아래 스크린샷 참조). 이러한 페더링 현상은 IE와 FireFox의 효과를 Photoshop의 그림자 효과에 더 가깝게 만들 수 있지만, 작은 크기의 그림자에 대해서는 우리가 원하는 것이 아닙니다. .

border + 배경달성된 효과

구현원리

html 코드

订单提交中<span class="dotting"></span>

css 코드

.dotting {
    display: inline-block; width: 10px; min-height: 2px;
    padding-right: 2px;
    border-left: 2px solid currentColor; border-right: 2px solid currentColor;   
    background-color: currentColor; background-clip: content-box;
    box-sizing: border-box;
    animation: dot 4s infinite step-start both;
    *zoom: expression(this.innerHTML = '...'); /* IE7 */
}
.dotting:before { content: '...'; } /* IE8 */
.dotting::before { content: ''; }
:root .dotting { margin-left: 2px; padding-left: 2px; } /* IE9+ */

@keyframes dot {
    25% { border-color: transparent; background-color: transparent; }          /* 0个点 */
    50% { border-right-color: transparent; background-color: transparent; }    /* 1个点 */
    75% { border-right-color: transparent; }                                   /* 2个点 */
}

지침:

1도 마찬가지입니다. 초 애니메이션, 초당 1포인트 표시
2. IE7/IE8의 구현 원리는 위의 box-shadow 방식과 동일하며 둘 다 콘텐츠 생성이 필요하지 않습니다. IE7/IE8과 호환 가능하며 첫 번째 CSS 코드 주석 은 일부 CSS 삭제를 나타냅니다.
3. currentColor 키워드는 가장 큰 기여를 하는 그래픽을 특징으로 합니다. IE9+ 브라우저에서 왼쪽 및 오른쪽 패딩에 배경색이 없으므로 동일한 도트 효과를 형성할 수 있는 CSS3 background-clip 속성입니다.
5.box-sizing은 최신 브라우저가 IE7/IE8과 정확히 동일한 너비를 차지하도록 하는 역할을 합니다. IE7/IE8의 실제 너비는 12픽셀의 너비+패딩 오른쪽이며, 다른 최신 브라우저에서도 마찬가지입니다. 너비+여백-왼쪽 12픽셀;
6. 여기 CSS 코드는 주로 원리를 설명하는 데 사용되므로 -webkit-animation 및 @-webkit-keyframes 개인 접두사는 실제로 표시되지 않습니다. 필요합니다.

위 내용은 CSS3 애니메이션이 "..." 로딩 애니메이션 효과를 구현하는 방법 정보(2)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!