qq_25410713 2016-04-23 03:58 采纳率: 66.7%
浏览 2125
已采纳

怎么控制背景音乐 html

开关样式

就像这个开关 off关闭背景音乐 on打开背景音乐

补充一下开关源码,不要求使用这个开关

 <!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></head><body>
<label class="button">
  <input type="checkbox">
  <span></span>
  <span></span>
  <span></span>
</label>
</body>
</html>
  • 写回答

2条回答 默认 最新

  • qq_25410713 2016-04-23 04:19
    关注

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

     <!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>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面