CSS3中如何一个字体”Loading”进度条效果呢?


摘要:
下文讲述使用css代码实现一个Loading字体进度条的方法分享,如下所示:

进度条是我们日常开发中常用的样式,
那么css如何实现一个炫酷的进度条呢?
下文将一一道来,如下所示:

 实现思路:
     主要使用css的动画属性,
	 改变元素的样式,达到动画效果
 

例:
css 实现Loading动画效果的示例分析

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程</title>
<style type="text/css">
html {
  animation: dongHua1 6s infinite;
}
@keyframes dongHua1 {
  0% {
    background: #000;
  }
  50% {
    background: #FFF;
  }
  100% {
    background: #000;
  }
}
body {
  padding-top: 15em;
  padding-left: 18em;
  text-align: center;
}
div {
  width: 100px;
  height: 100px;
  /*background-color:#000;*/
  margin: auto;
  float: left;
  border-radius: 50%;
  color: #FFF;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 500%;
  line-height: 100px;
  animation: dongHua2 6s infinite;
}
@keyframes dongHua2 {
  0% {
    color: #FFF;
    width: 0;
  }
  50% {
    color: #000;
  }
  100% {
    color: #FFF;
  }
}
</style>
</head>
<body>
  <div>L</div>
  <div>O</div>
  <div>A</div>
  <div>D</div>
  <div>I</div>
  <div>N</div>
  <div>G</div>
</body>
</html>
css3实现一个Loading进度条示例分享

css3实现一个Loading进度条示例分享