css3实现不停得动画旋转暂停--音乐的旋转暂停等、

最新推荐文章于 2022-05-23 14:48:27 发布

河北小黄人

最新推荐文章于 2022-05-23 14:48:27 发布

阅读量4.3k

点赞数 5

分类专栏： css

本文链接：https://blog.csdn.net/wangyu12z/article/details/50634837

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta charset='utf-8'/>
	<title>慕课迎春</title>
</head>
<body>
	<style type="text/css">
		*{margin:0;padding:0;}
		#page1,#page2{width:100%;height:100%;position:absolute;}
		#page1{background:red;}
		#page2{background:blue;top:100%;}

		#page1 #rallback{width:120px;height:120px;background:black;
			position:absolute;top:50%;left:50%;margin:-60px 0 0 -60px; /*垂直居中*/
			font-size:100px;text-align:center;line-height:120px;border-radius:20px;
			font-weight:bold;
			/*css3动画无限制的旋转*/
		 	-webkit-animation: music_disc 4s linear infinite;
		 	animation: music_disc 4s linear infinite;
		 	/*-webkit-animation-direction:alternate;*/   /*//平滑的过渡---反方向运动*/
		}
		
		/*css3动画的旋转*/
		@-webkit-keyframes music_disc {
		    0% {
		        -webkit-transform: rotate(0deg);
		            -ms-transform: rotate(0deg);
		             -o-transform: rotate(0deg);
		                transform: rotate(0deg);
		                background:black;
		                color:red;
		    }
		    100% {
		        -webkit-transform: rotate(360deg);
		            -ms-transform: rotate(360deg);
		             -o-transform: rotate(360deg);
		                transform: rotate(360deg);
		                 background:white;
		                 color:blue;
		    }
		}

	</style>

	<audio src="http://sc1.111ttt.com/2016/5/02/03/195032222389.mp3" autoplay="autoplay" id="music"></audio>

	<div id="page1">
		<div id="rallback">福</div>
	</div>

	<div id="page2">
	</div>

	<!-- 
		page1旋转暂停
		animation-play-state属性
		当你想在动画执行过程中暂停，并且接下来让动画接着执行。这时CSS的animation-play-state属性是非常有用的。你可以可以通过JavaScript像这样更改CSS(注意你的前缀)：
		element.style.webkitAnimationPlayState = "paused";
		element.style.webkitAnimationPlayState = "running";
	 -->
	<script type="text/javascript">
		window.onload = function(){
			
			var flag = 1; //开启音乐
			var music = document.getElementById('music');
			var rallback = document.getElementById('rallback');

			window.onclick = function(){
			 	if( flag==1 ){
			 		music.pause();  /*音乐关闭*/
			 		flag = 0;
			 		rallback.style.webkitAnimationPlayState = "paused";  //旋转动画暂停
			 	}else{
			 		music.play();   /*音乐开启*/
			 		flag = 1;
			 		rallback.style.webkitAnimationPlayState = "running";  //旋转动画暂停
			 	}
			}	
		}		
	</script>


</body>
</html>

河北小黄人

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
css3实现不停得动画旋转暂停--音乐的旋转暂停等、

慕课迎春 *{margin:0;padding:0;} #page1,#page2{width:100%;height:100%;position:absolute;} #page1{background:red;} #page2{background:blue;top:100%;} #page1 #rallback{width:120px;height:120px;
复制链接

扫一扫