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

黄舟
풀어 주다: 2017-05-26 13:19:37
원래의
1547명이 탐색했습니다.

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

소개

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

구현 원칙

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 = &#39;...&#39;); /*  for IE7. 若无需兼容IE7, 此行删除 */
}
.dotting:before { content: &#39;...&#39;; } /* for IE8. 若无需兼容IE8, 此行以及下一行删除*/
.dotting::before { content: &#39;&#39;; } /* 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에서 생성된 그래픽의 색상이 환경의 속성 값과 동일하도록 합니다. 즉, 텍스트 색상과 동일합니다.

각 브라우저에서 얻을 수 있는 효과는 그림과 같습니다.
CSS3 애니메이션이 '...' 로딩 애니메이션 효과를 구현하는 방법 정보(2)

단점

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

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 = &#39;...&#39;); /* IE7 */
}
.dotting:before { content: &#39;...&#39;; } /* IE8 */
.dotting::before { content: &#39;&#39;; }
: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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿