도트 효과를 얻기 위해 CSS3를 사용하는 예 설명-H5 튜토리얼-php.cn

도트 효과를 얻기 위해 CSS3를 사용하는 예 설명

巴扎黑

풀어 주다： 2017-07-19 11:16:24

원래의

2019명이 탐색했습니다.

상자 그림자를 기반으로 한 도트 효과

이론적으로 상자 그림자는 모든 그래픽 효과를 얻을 수 있습니다. 당연히 상자 그림자를 사용하여 도트 효과를 생성한 다음 애니메이션을 통해 다양한 시점에서 도트 수를 제어하여 도트를 얻을 수 있습니다. . 도트 도트... 로딩 효과~

1. 점진적인 호환성
CSS3 애니메이션 애니메이션을 지원하는 브라우저에서는 이를 지원하지 않는 브라우저에 도트 애니메이션 효과를 표시하지만, IE7/IE8에서는 실제 문자를 표시합니다. 브라우저도 CSS3에 의해 생성되며 정적이며 애니메이션 효과가 없습니다. 이는 점진적인 호환성입니다.

2. 구현 원리
우선 HTML은 매우 간단합니다. 태그와 클래스 이름만 있으면 됩니다(태그는 비어 있어야 함). 거의 모든 종류를 처리할 수 있습니다.

XML/HTML 코드 내용을 클립보드에 복사합니다

제출 순서대로 코드는 이것이 있는 한 페이지 어디에든 우리의 모든 비밀이 있는 곳입니다. 소량의 HTML을 사용하면 텍스트와 잘 혼합되고 자동으로 색상이 일치하는 점 애니메이션을 만들 수 있습니다. 예를 들어, 이 기사의 "제목 1"과 "제목 2" 뒤에 있는 도트 앤 도트 애니메이션은 약간의 HTML이 추가된 것입니다.

다음은 많은 기대를 모으는 CSS 코드입니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
dot {
  display:inline-block; 
  width:3ch;
  text-indent:-1ch;
  vertical-align:bottom; 
  overflow:hidden;
  animation:dot 3s infinite step-start both;
}
@keyframes dot {
  33% { text-indent: 0; }
  66% { text-indent: -2ch; }
}
</style>
</head>
<body>
<a href="javascript:">提交进行中<dot>...</dot></a>
</body>
</html>

로그인 후 복사

위 내용은 도트 효과를 얻기 위해 CSS3를 사용하는 예 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!