css 开关按钮-单击音乐图标可暂停和播放音乐。

bendan520 2023年8月26日 css 0

明天H5比赛训练时css 开关按钮css 开关按钮，我学到了一个新内容，就是上面的话题。

总共分为三个部分。

废话不多说，我们上代码吧。

css 开关按钮_开关按钮on是开还是关_开关按钮开关

1、创建一个.html页面，但引入音乐和图标来实现网页的显示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单击音乐图标实现暂停与播放。</title>
		
		
		<link rel="stylesheet" type="text/css" href="css/css.css"/>
		
	</head>
	<body style="background-color: cornflowerblue;">
		
		
		<audio id="music" autoplay="autoplay" loop="loop" src="media/BGM.mp3" ></audio>
		
		
		<img id="musicico" onclick="musiccc()" src="img/音乐ico.png" width="200px" >
		
	</body>
	
	<script type="text/javascript" src="js/js.js"></script>
</html>

css 开关按钮_开关按钮on是开还是关_开关按钮开关

2. 创建.js页面来实现逻辑代码。

// 动画旋转
var music = document.getElementById('music')    //获取音乐
var musicico = document.getElementById('musicico')   //获取音乐图标
var tem = true  //设置一个变量，用来控制音乐是否在播放。
//定义一个函数，当用户单击的时候触发这个函数，从而实现音乐的暂停与播放。
function musiccc(){
	//tem用来控制音乐当前是否在播放。true代表音乐正在播放，false代表音乐当前正在处于暂停的状态。
	if(tem == false){
		music.play()  //播放音乐
		tem = true  
		document.getElementById('musicico').style.animationPlayState = 'running'  //播放音乐图标
	}else{
		music.pause()  //暂停音乐
		tem = false
		document.getElementById('musicico').style.animationPlayState = 'paused'  //暂停音乐图标
	}
}

css 开关按钮_开关按钮开关_开关按钮on是开还是关

3、创建.css页面，实现动画旋转功能。

/* 音乐播放和暂停 */
img#musicico{
	animation-name: music; //这个名称是下方的动画名称
	animation-timing-function: linear;  //linear代表均速旋转
	animation-duration: 3s;  //3秒旋转完一圈
	animation-iteration-count: infinite; //旋转无数次
}
/* 实现动画的旋转 */
@keyframes music{
	0%{
		transform: rotate(0deg);
	}
	50%{
		transform: rotate(180deg);
	}
	100%{
		transform: rotate(365deg);
	}
}

暂时就这样，我们来看看效果吧。

由于.gif动画没有声音，治疗图上的体验不是很好。

css 开关按钮_开关按钮开关_开关按钮on是开还是关

并且达到了我们想要的疗效。

刚才没啥用，赶紧打开你的开发软件实践一下吧。