js--hover移动

html代码部分:

<div class="demo">
       <div class="box">hover</div>
</div>

css3部分:

@-webkit-keyframes move{
			from,to{
				box-shadow:1px 1px 1px rgba(0,0,0,.75);
				top:0;
				left:50px;			
			}
			50%{
				box-shadow:15px 15px 15px rgba(0,0,0,.45);
				top:-10px;
				left:40px;			
			}
		}
		.demo{
			padding:10px;
		}
		.box{
			position:relative;
			left:50px;
			top:0px;
			width:400px;
			margin:5px auto;
			background-color: #a0b3d6;
			-webkit-box-shadow:1px 1px 1px rgba(0,0,0,.75);
			color:#fff;
			font-size:2em;
			text-align:center;
			cursor: pointer;
		}
		.box:hover{
			-webkit-animation:move 2s infinite;
		}
	</style>

  

posted @ 2013-04-30 00:58  GM_Lv  阅读(214)  评论(0)    收藏  举报