jquery+css实现一个收音机ui界面效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery+css实现一个收音机ui界面效果代码，包括打开关闭、选择电台。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600'>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/foundation-icons.css">

    <style>
        html {
          height: 100%;
        }
        body {
          background: #FFF linear-gradient(15deg, #496889, #928AB0, #7B538C) no-repeat;
          background-size: 100% 200%;
          animation: background-scroll 7s alternate ease-in-out infinite;
          font-family: 'Open Sans', sans-serif;
          font-weight: 100;
          user-select: none;
        }
        input[type="range"] {
          -webkit-appearance: none;
          outline: none;
        }
        .start-radio-button {
          position: absolute;
          top: 200px;
          left: 0;
          right: 0;
          margin: auto;
          width: 240px;
          padding: 15px 0;
          background: rgba(0, 0, 0, 0.1);
          cursor: pointer;
          display: block;
          text-align: center;
          font-size: 40px;
          color: #FFF;
          opacity: 0;
          transition-timing-function: cubic-bezier(0.25, 1.5, 0.7, 1);
          transform: translateY(50px);
          transition-duration: 0.6s;
          transition-delay: 0.3s;
        }
        .window {
          width: 350px;
          height: 70px;
          margin: 100px auto;
          position: relative;
          border-radius: 3px;
          overflow: hidden;
          background: #FFF;
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 0 25px rgba(0, 0, 0, 0.1);
          opacity: 0;
          transform: translateY(-50px);
          transition-timing-function: cubic-bezier(0.25, 1.5, 0.7, 1);
        }
        .window:hover .page.page-front .cover .tool-buttons {
          opacity: 1;
        }
        .window .top-bar {
          height: 70px;
          background: #FFF;
          position: relative;
          transform: scale(0.4);
          opacity: 0;
        }
        .window .top-bar .left-action,
        .window .top-bar .right-action {
          position: absolute;
          top: 0;
          height: 70px;
          width: 70px;
          cursor: pointer;
          opacity: 0.4;
          transition-duration: 0.3s;
        }
        .window .top-bar .left-action:hover,
        .window .top-bar .right-action:hover {
          opacity: 1;
          transition-duration: 0.05s;
        }
        .window .top-bar .left-action {
          left: 0;
        }
        .window .top-bar .left-action .line {
          position: absolute;
          left: 23px;
          width: 25px;
          height: 2px;
          background: #555;
          transition-duration: 0.3s;
        }
        .window .top-bar .left-action .line-1 {
          top: 27px;
        }
        .window .top-bar .left-action .line-2 {
          top: 35px;
        }
        .window .top-bar .left-action .line-3 {
          top: 43px;
        }
        .window .top-bar .right-action {
          right: 0;
        }
        .window .top-bar .right-action .line {
          transition-duration: 0.3s;
        }
        .window .top-bar .right-action .line-1 {
          position: absolute;
          top: 25px;
          right: 20px;
          height: 20px;
          width: 20px;
          border-radius: 100px;
          border: 2px solid #555;
        }
        .window .top-bar .right-action .line-2 {
          position: absolute;
          top: 25px;
          right: 31px;
          height: 8px;
          width: 0;
          border: 1px solid #555;
          border-radius: 100px;
          z-index: 2;
        }
        .window .top-bar .right-action .line-3 {
          position: absolute;
          top: 25px;
          right: 28px;
          height: 7px;
          width: 8px;
          background: #FFF;
          z-index: 1;
        }
        .window .top-bar .mid-text {
          text-align: center;
          line-height: 70px;
          height: 70px;
          font-size: 25px;
        }
        .window .top-bar .mid-text .title {
          position: absolute;
          top: 0;
          left: 70px;
          right: 70px;
          bottom: 0;
          text-align: center;
          transition-duration: 0.3s;
        }
        .window .top-bar .mid-text .page-front-title {
          color: #EA8400;
        }
        .window .top-bar .mid-text .page-saved-stations-title {
          color: #EE0085;
          opacity: 0;
          transform: scale(0.4);
        }
        .window .page {
          position: absolute;
          top: 70px;
          left: 0;
          right: 0;
          height: 390px;
        }
        .window .page.page-front {
          z-index: 1;
        }
        .window .page.page-front .cover {
          height: 100px;
          background: #FFF linear-gradient(15deg, #EE0006, #EA8400, #EE0085) no-repeat;
          background-size: 100% 200%;
          animation: background-scroll 7s alternate ease-in-out infinite;
          position: relative;
          overflow: hidden;
          opacity: 0;
        }
        .window .page.page-front .cover .glow {
          position: absolute;
          top: -50px;
          left: -80px;
          height: 120px;
          width: 300px;
          background: linear-gradient(360deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
          z-index: 3;
          transform: rotate(-45deg);
          pointer-events: none;
          opacity: 0;
        }
        .window .page.page-front .cover .tool-buttons {
          position: absolute;
          top: 20px;
          right: 20px;
          z-index: 3;
          opacity: 0;
          transition-duration: 0.3s;
        }
        .window .page.page-front .cover .tool-buttons li {
          float: left;
          padding: 7px 10px;
          background: rgba(255, 255, 255, 0.15);
          border-radius: 5px;
          color: #FFF;
          margin-left: 10px;
          font-size: 14px;
          cursor: pointer;
          transition-duration: 0.3s;
        }
        .window .page.page-front .cover .tool-buttons li:hover {
          transition-duration: 0..........完整代码请登录后点击上方下载按钮下载查看