HTML5实现的如钟表一样的效果

最新推荐文章于 2021-08-20 15:14:39 发布

mcbeath

最新推荐文章于 2021-08-20 15:14:39 发布

阅读量650

点赞数

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/mcbeath/article/details/8733013

版权

HTML5 专栏收录该内容

5 篇文章

订阅专栏

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title> Simple CSS3 Animation </title>
  <style>
  #rectBox{
          width:100px;
		  height:10px;
		  background:#666;
		  position:absolute;
		  top:200px;
		  left:200px;
		  /*Chrome*/
		  -webkit-animation:colorChange 5s linear .5s infinite;
		  -webkit-transform-origin:0% 50%;
		  /*Mozilla*/
		  -moz-animation:colorChange 5s linear .5s infinite;
		  -moz-transform-origin:0% 50%;
		  /*Opera*/
		  -o-animation:colorChange 5s linear .5s infinite;
		  -o-transform-origin:0% 50%;
  }
  #circle{
         width:200px;
		 height:200px;
		 background:#666;
		 position:absolute;
		 top:105px;
		 left:100px;
		 border-radius:50%;
  }
  /*Chrome*/
  @-webkit-keyframes colorChange
  {
         0%   {background:red;-webkit-transform:rotate(0deg);}
		 50%  {background:blue;-webkit-transform:rotate(180deg);}
		 100% {background:red;-webkit-transform:rotate(360deg);}
  }
  /*Mozilla*/
  @-moz-keyframes colorChange
  {
         0%   {background:red;-moz-transform:rotate(0deg);}
		 50%  {background:blue;-moz-transform:rotate(180deg);}
		 100% {background:red;-moz-transform:rotate(360deg);}
  }
  /*Opera*/
  @-o-keyframes colorChange
  {
         0%   {background:red;-o-transform:rotate(0deg);}
		 50%  {background:blue;-o-transform:rotate(180deg);}
		 100% {background:red;-o-transform:rotate(360deg);}
  }
  </style>
 </head>

 <body>
    <div id="circle"> </div>
	<div id="rectBox"></div>
 </body>
</html>