魔工坊

魔芋

Web工程师


发布者资料

  • 性别: 帅哥
  •  地区: 北京
  • 认证:  
  • 日期: 2015-11-10 13:05:33

教程标签云


教程分类


推荐教程


同类教程

456

css3旋转效果


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>demo</title>
	<style>
		body{
			margin: 0;
			padding: 0;
			background-color: #fff;
			color:white;
		}
		#add{
			margin: 0 auto;
			width: 80%;
			height: 500px;
			background-color: #890;
			animation: myfirst 4s linear 1s infinite normal;
			
			-moz-animation: myfirst 4s linear 1s infinite normal;
			
			-webkit-animation: myfirst 4s linear 1s infinite normal;
			
			-o-animation: myfirst 4s linear 1s infinite normal;
		}
		
		@keyframes myfirst
		{
		20%   {background: red;transform:rotateY(0deg);}
		40%  {background: grey;transform:rotateY(90deg);}
		60%  {background: yellow;transform:rotateY(180deg);}
		80%  {background: blue;transform:rotateY(270deg);}
		100% {background: green;transform:rotateY(360deg);}
		}

		@-moz-keyframes myfirst 
		{
		20%   {background: red;transform:rotateY(0deg);}
		40%  {background: grey;transform:rotateY(90deg);}
		60%  {background: yellow;transform:rotateY(180deg);}
		80%  {background: blue;transform:rotateY(270deg);}
		100% {background: green;transform:rotateY(360deg);}
		}

		@-webkit-keyframes myfirst 
		{
		20%   {background: red;transform:rotateY(0deg);}
		40%  {background: grey;transform:rotateY(90deg);}
		60%  {background: yellow;transform:rotateY(180deg);}
		80%  {background: blue;transform:rotateY(270deg);}
		100% {background: green;transform:rotateY(360deg);}
		}

		@-o-keyframes myfirst 
		{
		20%   {background: red;transform:rotateY(0deg);}
		40%  {background: grey;transform:rotateY(90deg);}
		60%  {background: yellow;transform:rotateY(180deg);}
		80%  {background: blue;transform:rotateY(270deg);}
		100% {background: green;transform:rotateY(360deg);}
		}
	</style>
</head>
<body>
<div id="add"><h1>旋转</h1></div>
</body>
</html>

直接点击blob.png,稍等片刻即可看到效果

喵,赏1块零钱,给我家喵星人买罐头吧 :)

赞赏支付方式:

赞赏

赞赏

赞赏

 

[ 教程搜索 ]  [ 加入收藏 ]  [ 告诉好友 ]  [ 打印本文 ]  [ 关闭窗口 ]

魔友吐槽

浏览上篇

浏览下篇

发布教程

魔工坊系统提示