css3animation实现loading小动画代码,Css代码库,德仔网

代码语言
代码分类
【Css】 css3animation实现loading小动画
作者: / 发布于2012/12/6/ 570
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.loading,
.loading:before,
.loading:after {
    -moz-animation: loading 8s cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite;
    -webkit-animation: loading 8s cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite;
  animation: loading 8s cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite;
  background: #e12a44;
  box-sizing: border-box;
  display: block;
  font: 0/0 a;
  height: 40px;
  left: 50%;
  margin: -20px 0 0 -5px;
  position: absolute;
  top: 50%;
  width: 10px;
}
.loading:before,
.loading:after{
  content: '';
  display: block;
  position: absolute;
    -webkit-transform: rotate(0deg);
  left: -10px
}
.loading:after {
  left: auto;
  right: -15px;
}
  @-moz-keyframes 'loading' {
    0% {
      -moz-transform: rotate(0deg);
    }
	  7.5% {
	    -moz-transform: rotate(0deg);
	  }
	  12.5% {
	    -moz-transform: rotate(90deg);
	  }
	  20% {
	    -moz-transform: rotate(90deg);
	  }
	  25% {
	    -moz-transform: rotate(180deg);
	  }
	  32.5% {
	    -moz-transform: rotate(180deg);
	  }
	  37.5% {
	    -moz-transform: rotate(270deg);
	  }
	  45% {
	    -moz-transform: rotate(270deg);
	  }
	  50% {
	    -moz-transform: rotate(180deg);
	  }
	  57.5% {
	    -moz-transform: rotate(180deg);
	  }
	  62.5% {
	    -moz-transform: rotate(270deg);
	  }
	  70% {
	    -moz-transform: rotate(270deg);
	  }
	  75% {
	    -moz-transform: rotate(360deg);
	  }
	  82.5% {
	    -moz-transform: rotate(360deg);
	  }
	  87.5% {
	    -moz-transform: rotate(270deg);
	  }
	  95% {
	    -moz-transform: rotate(270deg);
	  }
	  100% {
	    -moz-transform: rotate(360deg);
	  }
	}
	@-webkit-keyframes 'loading' {
	  0% {
	    -webkit-transform: rotate(0deg);
	  }
	  7.5% {
	    -webkit-transform: rotate(0deg);
	  }
	  12.5% {
	    -webkit-transform: rotate(90deg);
	  }
	  20% {
	    -webkit-transform: rotate(90deg);
	  }
	  25% {
	    -webkit-transform: rotate(180deg);
	  }
	  32.5% {
	    -webkit-transform: rotate(180deg);
	  }
	  37.5% {
	    -webkit-transform: rotate(270deg);
	  }
	  45% {
	    -webkit-transform: rotate(270deg);
	  }
	  50% {
	    -webkit-transform: rotate(180deg);
	  }
	  57.5% {
	    -webkit-transform: rotate(180deg);
	  }
	  62.5% {
	    -webkit-transform: rotate(270deg);
	  }
	  70% {
	    -webkit-transform: rotate(270deg);
	  }
	  75% {
	    -webkit-transform: rotate(360deg);
	  }
	  82.5% {
	    -webkit-transform: rotate(360deg);
	  }
	  87.5% {
	    -webkit-transform: rotate(270deg);
	  }
	  95% {
	    -webkit-transform: rotate(270deg);
	  }
	  100% {
	    -webkit-transform: rotate(360deg);
	  }
	}
@keyframes 'loading' {
  0% {
    transform: rotate(0deg);
  }
  7.5% {
    transform: rotate(0deg);
  }
  12.5% {
    transform: rotate(90deg);
  }
  20% {
    transform: rotate(90deg);
  }
  25% {
    transform: rotate(180deg);
  }
  32.5% {
    transform: rotate(180deg);
  }
  37.5% {
    transform: rotate(270deg);
  }
  45% {
    transform: rotate(270deg);
  }
  50% {
    transform: rotate(180deg);
  }
  57.5% {
    transform: rotate(180deg);
  }
  62.5% {
    transform: rotate(270deg);
  }
  70% {
    transform: rotate(270deg);
  }
  75% {
    transform: rotate(360deg);
  }
  82.5% {
    transform: rotate(360deg);
  }
  87.5% {
    transform: rotate(270deg);
  }
  95% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
</head>
<body>
<strong class="loading">Loading…</strong>
</body>
</html>
试试其它关键字
　小动画　
同语言下
可能有用的
贡献的其它代码Label