2 qq 25410713 qq_25410713 于 2016.04.23 10:49 提问

已解决的问题:html 用开关控制背景音乐

可以用下面这个开关实现控制背景音乐吗?求指教,如果不行要怎么实现类似功能




 <!DOCTYPE html>
<html class=''>
<head>
<meta charset='UTF-8'>
<title>开关</title>
<style class="cp-pen-styles">
@import url(http://fonts.useso.com/css?family=Open+Sans:800);
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}
body {
  background-color: #2c3e50;
}
.button {
  display: block;
  position: absolute;
  width: 240px;
  height: 80px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: -webkit-linear-gradient(top, #11181f 0%, #161f29 100%);
  background: linear-gradient(to bottom, #11181f 0%, #161f29 100%);
  border-radius: 40px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.button span {
  position: absolute;
  display: block;
}
.button span:first-of-type {
  z-index: 100;
  top: 4px;
  right: 4px;
  width: 160px;
  height: 72px;
  background: -webkit-linear-gradient(top, #2c3e50 0%, #1e2a36 100%);
  background: linear-gradient(to bottom, #2c3e50 0%, #1e2a36 100%);
  box-shadow: 0 6px 4px rgba(255, 255, 255, 0.1) inset, 0 2px 0px rgba(255, 255, 255, 0.2) inset, 0 -6px 0px rgba(0, 0, 0, 0.2) inset, 0 -2px 0px rgba(0, 0, 0, 0.2) inset, 0 2px 2px rgba(0, 0, 0, 0.4), -4px 2px 8px rgba(0, 0, 0, 0.4), 2px 0 1px rgba(242, 201, 197, 0.5) inset;
  border-radius: 36px;
  -webkit-transition: right 400ms cubic-bezier(1, 0, 0, 1), box-shadow 400ms ease;
          transition: right 400ms cubic-bezier(1, 0, 0, 1), box-shadow 400ms ease;
}
.button span:nth-last-of-type(-n+2) {
  z-index: 10;
  top: 4px;
  width: 116px;
  height: 72px;
  -webkit-transition: opacity 800ms ease 100ms;
          transition: opacity 800ms ease 100ms;
}
.button span:nth-last-of-type(-n+2):after {
  position: absolute;
  top: 26px;
  line-height: 1;
  font-family: "Open Sans";
  font-weight: 800;
  font-size: 24px;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 20px #ffffff;
}
.button span:nth-of-type(2) {
  left: 4px;
  background: -webkit-linear-gradient(top, #c0392b 0%, #d65548 100%);
  background: linear-gradient(to bottom, #c0392b 0%, #d65548 100%);
  border-top-left-radius: 36px;
  border-bottom-left-radius: 36px;
  box-shadow: 4px 4px 12px 4px rgba(0, 0, 0, 0.5) inset, 0 -2px 8px rgba(0, 0, 0, 0.4) inset;
}
.button span:nth-of-type(2):after {
  content: "OFF";
  left: 18px;
}
.button span:last-of-type {
  right: 4px;
  background: -webkit-linear-gradient(top, #2ecc71 0%, #7ee2a8 100%);
  background: linear-gradient(to bottom, #2ecc71 0%, #7ee2a8 100%);
  border-top-right-radius: 36px;
  border-bottom-right-radius: 36px;
  box-shadow: -4px 4px 12px 4px rgba(0, 0, 0, 0.5) inset, 0 -2px 8px rgba(0, 0, 0, 0.4) inset;
  opacity: 0.2;
}
.button span:last-of-type:after {
  content: "ON";
  right: 22px;
}
.button input[type="checkbox"] {
  display: none;
}
.button input[type="checkbox"]:checked ~ span:first-of-type {
  right: 76px;
  box-shadow: 0 6px 4px rgba(255, 255, 255, 0.1) inset, 0 2px 0px rgba(255, 255, 255, 0.2) inset, 0 -6px 0px rgba(0, 0, 0, 0.2) inset, 0 -2px 0px rgba(0, 0, 0, 0.2) inset, 0 2px 2px rgba(0, 0, 0, 0.4), 4px 2px 8px rgba(0, 0, 0, 0.4), -2px 0 1px rgba(209, 245, 224, 0.5) inset;
}
.button input[type="checkbox"]:checked ~ span:nth-of-type(2) {
  opacity: 0.2;
}
.button input[type="checkbox"]:checked ~ span:last-of-type {
  opacity: 1;
}
</style></head><body>
<label class="button">
  <input type="checkbox">
  <span></span>
  <span></span>
  <span></span>
</label>
</body>
</html>

5个回答

qq_25410713
qq_25410713   2016.04.23 12:21
已采纳

已解决,为什么没有人回答呢?

 <!DOCTYPE html>
<html class=''>
<head>
<meta charset='UTF-8'>
<title>纯CSS3实现动画开关按钮特效</title>
<style class="cp-pen-styles">
@import url(http://fonts.useso.com/css?family=Open+Sans:800);
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}
body {
  background-color: #2c3e50;
}
.button {
  display: block;
  position: absolute;
  width: 240px;
  height: 80px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: -webkit-linear-gradient(top, #11181f 0%, #161f29 100%);
  background: linear-gradient(to bottom, #11181f 0%, #161f29 100%);
  border-radius: 40px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.button span {
  position: absolute;
  display: block;
}
.button span:first-of-type {
  z-index: 100;
  top: 4px;
  right: 4px;
  width: 160px;
  height: 72px;
  background: -webkit-linear-gradient(top, #2c3e50 0%, #1e2a36 100%);
  background: linear-gradient(to bottom, #2c3e50 0%, #1e2a36 100%);
  box-shadow: 0 6px 4px rgba(255, 255, 255, 0.1) inset, 0 2px 0px rgba(255, 255, 255, 

0.2) inset, 0 -6px 0px rgba(0, 0, 0, 0.2) inset, 0 -2px 0px rgba(0, 0, 0, 0.2) inset, 0 2px 

2px rgba(0, 0, 0, 0.4), -4px 2px 8px rgba(0, 0, 0, 0.4), 2px 0 1px rgba(242, 201, 197, 0.5) 

inset;
  border-radius: 36px;
  -webkit-transition: right 400ms cubic-bezier(1, 0, 0, 1), box-shadow 400ms ease;
          transition: right 400ms cubic-bezier(1, 0, 0, 1), box-shadow 400ms ease;
}
.button span:nth-last-of-type(-n+2) {
  z-index: 10;
  top: 4px;
  width: 116px;
  height: 72px;
  -webkit-transition: opacity 800ms ease 100ms;
          transition: opacity 800ms ease 100ms;
}
.button span:nth-last-of-type(-n+2):after {
  position: absolute;
  top: 26px;
  line-height: 1;
  font-family: "Open Sans";
  font-weight: 800;
  font-size: 24px;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 20px #ffffff;
}
.button span:nth-of-type(2) {
  left: 4px;
  background: -webkit-linear-gradient(top, #c0392b 0%, #d65548 100%);
  background: linear-gradient(to bottom, #c0392b 0%, #d65548 100%);
  border-top-left-radius: 36px;
  border-bottom-left-radius: 36px;
  box-shadow: 4px 4px 12px 4px rgba(0, 0, 0, 0.5) inset, 0 -2px 8px rgba(0, 0, 0, 0.4) 

inset;
}
.button span:nth-of-type(2):after {
  content: "OFF";
  left: 18px;
}
.button span:last-of-type {
  right: 4px;
  background: -webkit-linear-gradient(top, #2ecc71 0%, #7ee2a8 100%);
  background: linear-gradient(to bottom, #2ecc71 0%, #7ee2a8 100%);
  border-top-right-radius: 36px;
  border-bottom-right-radius: 36px;
  box-shadow: -4px 4px 12px 4px rgba(0, 0, 0, 0.5) inset, 0 -2px 8px rgba(0, 0, 0, 0.4) 

inset;
  opacity: 0.2;
}
.button span:last-of-type:after {
  content: "ON";
  right: 22px;
}
.button input[type="checkbox"] {
  display: none;
}
.button input[type="checkbox"]:checked ~ span:first-of-type {
  right: 76px;
  box-shadow: 0 6px 4px rgba(255, 255, 255, 0.1) inset, 0 2px 0px rgba(255, 255, 255, 

0.2) inset, 0 -6px 0px rgba(0, 0, 0, 0.2) inset, 0 -2px 0px rgba(0, 0, 0, 0.2) inset, 0 2px 

2px rgba(0, 0, 0, 0.4), 4px 2px 8px rgba(0, 0, 0, 0.4), -2px 0 1px rgba(209, 245, 224, 0.5) 

inset;
}
.button input[type="checkbox"]:checked ~ span:nth-of-type(2) {
  opacity: 0.2;
}
.button input[type="checkbox"]:checked ~ span:last-of-type {
  opacity: 1;
}
</style>
<bgsound src="" id="bgm"></bgsound>
<script>
function bgmh(){
if (bgm.src ==''){bgm.src='./mp3/TheDawn.mp3'}
else {bgm.src=''}
}
</script>
</head><body>
<label class="button">
  <input type="checkbox" onclick="bgmh();">
  <span></span>
  <span></span>
  <span></span>
</label>
</body>
</html>

km4gedan
km4gedan   2016.04.23 10:58

不能 。 一些简单的css 理论上不行,你去看看html5 咋弄这个的,没有这么复杂吧

km4gedan
km4gedan   2016.04.23 10:57

不能 。 一些简单的css 理论上不行,你去看看html5 咋弄这个的,没有这么复杂吧

CSDNXIAOD
CSDNXIAOD   2016.04.23 11:02

HTML 控制背景音乐
html背景音乐
HTML初体验——实现在不同页面下对背景音乐的控制
----------------------biu~biu~biu~~~在下问答机器人小D,这是我依靠自己的聪明才智给出的答案,如果不正确,你来咬我啊!

qq_25410713
qq_25410713   2016.04.23 11:05

有什么办法可以实现类似的功能

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
h5 audio 背景音乐播放开关控制
现在的活动h5基本都会有bgm的需求,下面提供一个通用的做法。 上面是开关的按钮,页面刚加载进来的时候,音乐是自动播放的。点击开关按钮可以控制音乐的播放和暂停。 产品:需求很简单,怎么实现我不管! 开发:好!那我给你来个五彩斑斓的黑 html: &amp;lt;!--背景音乐--&amp;gt; &amp;lt;audio id=&quot;music&quot; loop=&quot;loop&quot; style=&quot;display:...
Android背景音乐开关示例
Android背景音乐示例,Android背景音乐需要用到server,服务(Service)是Android中实现程序后台运行的解决方案,它非常适合用于去执行那些不需要和用户交互而且还要求长期运行的任务。服务的运行不依赖于任何用户界面,即使当程序被切换到后台,或者用户打开了另外一个应用程序,服务仍然能够保持正常运行。 程序中我用了 Switch控件,Switch控件只能在Android4.0版
Unity背景音乐控制
实现功能:点击按钮可实现音乐的播放与暂停及再次播放等,同时按钮sprite图片可在播放与暂停中切换。如点击按钮,图片变为暂停,同时播放背景音乐,再次点击按钮,即点击暂停按钮,音乐停止播放,并切换图片。代码如下:使用UnityEngine; 使用System.Collections; 使用UnityEngine.UI; 使用UnityEditor.Sprites; public class bgm:...
游戏暂停界面 和 音量开关 背景音乐 音效调节
using UnityEngine; using System.Collections; using UnityEngine.UI; using UnityEngine.Audio; #if UNITY_EDITOR using UnityEditor; #endif public class PauseManager : MonoBehaviour { public
Android中音乐开关的控制
最近研究了下Android的音频控制,以suduku中的音频控制为例,以备忘    首先我们配置下Settings.xml文件   <PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android"> <CheckBoxPreference android:key="music"
unity音乐开关及音量控制
在Component -- Audio下创造一个Audio Source 附于一个GameObject上,加上音乐,把playOnAwake勾去掉,然后将控制脚本附于它,再建一个GUI按钮来调用AudioSwitch()这个函数就OK了。 var myAudio; myAudio = GetComponent(AudioSource); //获取声音元件 private var sc
Cocos2d-x实例:设置背景音乐与音效-设置场景实现
设置场景(Setting),Setting.h文件代码如下:#ifndef __Setting_SCENE_H__ #define __Setting_SCENE_H__ #include "cocos2d.h" #include "SimpleAudioEngine.h" class Setting : public cocos2d::Layer { bool isEffect;
jquery控制背景音乐开关与自动播放提示音的方法
这篇文章主要介绍了jquery控制背景音乐开关与自动播放提示音的方法,实例分析了背景音乐开关的技巧与自动播放提示音的常见用法,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了jquery控制背景音乐开关与自动播放提示音的方法。分享给大家供大家参考。具体如下: 很多人初学网页制作时在网页中加入一段背景音乐,听到音乐响起的那一刻往往都会有一丝的成就感。 这里就为
用NGUI的控件控制游戏音量、音效、开关。
建立 UICheckBox作为背景音乐的勾选框,添加UIButton Sound组件,其下的Audio Clip属性可直接附上音效名字。 建立一个空物体绑定下边的脚本(脚本里的一些组件名字不太一样,别直接用,看明白再自己改),复选框的UICheckBox的Event Receiver绑定之前建的空物体 先定义  AudioSource AS; void Awa
HTML初体验——实现在不同页面下对背景音乐的控制
这是之前曾在知乎上提出的一个问题,后来经过查阅资料,自己给出了这样一个简单的方案贴了上去,现在再次把它拿过来放在这里,是为了和大家交流一下。 因为我觉得这样实现有些繁琐,希望能一起交流,给出更好的解答。 以下是整个实现的源代码,我把介绍也放在了里面: 图示:                 frame.html: 您的浏览器无法处理框架!