박스 섀도우는 이론적으로 모든 그래픽 효과를 생성할 수 있으며, 물론 도트별 구현도 가능합니다. 도트 로딩이 작동했습니다.
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의 그림자 효과에 더 가깝게 만들 수 있지만, 작은 크기의 그림자에 대해서는 우리가 원하는 것이 아닙니다. .
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!