angular实现一个倒计时效果代码-html代码-BFW代码库

angular实现一个倒计时效果代码

代码语言：html

所属分类：动画

代码描述：angular实现一个倒计时效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
 
  
  
<style>
body {
  text-align:center;
  background:#1d1f20;
  overflow:hidden;
}
button {
   background:#1d1f20;
  color:#ccc;
  border:none;
}
h1 { font-size:4em;}
.tnormal{
 color:#ccc; 
}


.pulse {
	-webkit-animation-name: 'pulse_animation';
	-webkit-animation-duration: 1000ms;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

@-webkit-keyframes pulse_animation {
	0% { -webkit-transform: scale(1); }
	30% { -webkit-transform: scale(1); }
	40% { -webkit-transform: scale(1.08); }
	50% { -webkit-transform: scale(1); }
	60% { -webkit-transform: scale(1); }
	70% { -webkit-transform: scale(1.05); }
	80% { -webkit-transform: scale(1); }
	100% { -webkit-transform: scale(1); }
}
</style>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/angular.1.7.js"></script>
</head>

<body  >

<div ng-app='TimerApp'>
 <div ng-controller="TimerCtrl">
   <h1 class="tnormal pulse" ng-style="cor">{{counter}}</h1>
   <div>
   <button ng-click='startTimer()'>Start</button> <button ng-click='stopTimer()'>Stop</button>
     <button ng-click='resetTimer()'>Reset</button>
   </div>
 </div>
</div>

  
      <script  >
var cores = ['.........完整代码请登录后点击上方下载按钮下载查看