web 中重新播放css 动画

最新推荐文章于 2024-07-09 15:59:19 发布

elaine_fu666

最新推荐文章于 2024-07-09 15:59:19 发布

阅读量615

点赞数

分类专栏： web前端文章标签： css web 动画 animate html

本文链接：https://blog.csdn.net/Flynn_Fu/article/details/48340493

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset = "utf-8">
	<title>animation</title>
	<style type="text/css">
		body{
			width: 100%;			
		}
		.type{
			width: 80px;
			height: 80px;
			border-radius: 50px;
			/*background:-webkit-gradient(radial,25 25,0,25 25,25,from(white),to(black));
			background:-moz-gradient(radial,25 25,0,25 25,25,from(white),to(black));*/
			background: -webkit-radial-gradient(circle, #ead, white); 
		}   	
		@-webkit-keyframes bounceOut {
		  	20% {
			    -webkit-transform: scale3d(.9, .9, .9);
	 	 	}

		  	50%, 55% {
			    opacity: 1;
			    -webkit-transform: scale3d(1.1, 1.1, 1.1);
		  	}

		  	to {
			    opacity: 0;
			    -webkit-transform: scale3d(.3, .3, .3);
		  	}
		}		
		.bounceOut {
			/*display: none;*/
			margin: auto;
			width: 50px;
			height: 50px;
			border-radius: 25px;
			background-color: rgb(18,131,207);
		  	-webkit-animation-name: bounceOut;
		  	animation-name: bounceOut;
 		 	-webkit-animation-duration: .75s;
  			animation-duration: .75s;
		}
		.test{}
	</style>
</head>
<body>
	<script type="text/javascript" src="/ui/js/jquery-2.1.1.min.js"></script>
	<div class="type"></div>
	<div class="bounceOut" id="circle"></div>
	<div class="test" id="test"></div>
	<script type="text/javascript">
	$(this).click(function () {
		$('div').eq(1).removeClass("bounceOut");
		var temp = $('div').eq(1);
		var newTemp = temp.clone(true);
		temp.after(newTemp);
		temp.remove();
		newTemp.addClass("bounceOut"); 
	});
	</script>
</body>

</html>