Home > Article > Web Front-end > css implementation of in-progress dot effect code sharing

css implementation of in-progress dot effect code sharing

巴扎黑Original: 2017-08-22 17:26:111678browse

This article mainly introduces the effect of CSS in progress. The code is attached to make it easier for everyone to understand the style setting. You can check the detailed explanation below for the specific operation steps. Interested friends can refer to it.

The code is as follows:

<!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>

The above is the detailed content of css implementation of in-progress dot effect code sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：css skills link annotationNext article：css skills link annotation

See more

css implementation of in-progress dot effect code sharing

Related articles