Rumah > Artikel > hujung hadapan web > css做出打点效果

css做出打点效果

php中世界最好的语言asal: 2018-03-21 14:49:342456semak imbas

这次给大家带来css做出打点效果，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>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：

css3的Transition平滑过渡菜单栏实现

box-shadow的阴影效果如何使用

常用的CSS实现垂直居中的4种方法

Atas ialah kandungan terperinci css做出打点效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：详解css加载会造成阻塞吗_CSS教程_CSS_网页制作Artikel seterusnya：双飞翼布局与圣杯布局图文详解

Artikel berkaitan

Lihat lagi