jquery+css实现一个收音机ui界面效果代码
代码语言：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.05s;
background: rgba(255, 255, 255, 0.25);
}
.window .page.page-front .cover .current-station-text {
font-size: 60px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
line-height: 250px;
text-align: center;
color: #FFF;
z-index: 2;
opacity: 0;
}
.window .page.page-front .cover .current-station-name-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 70px;
color: #FFF;
z-index: 2;
opacity: 0;
}
.window .page.page-front .cover .current-station-name-bar .left-action,
.window .page.page-front .cover .current-station-name-bar .right-action {
position: absolute;
top: 0;
height: 70px;
width: 70px;
line-height: 70px;
text-align: center;
font-size: 25px;
cursor: pointer;
opacity: 0.5;
transition-duration: 0.3s;
}
.window .page.page-front .cover .current-station-name-bar .left-action:hover,
.window .page.page-front .cover .current-station-name-bar .right-action:hover {
opacity: 1;
transition-duration: 0.05s;
}
.window .page.page-front .cover .current-station-name-bar .left-action {
left: 0;
}
.window .page.page-front .cover .current-station-name-bar .right-action {
right: 0;
}
.window .page.page-front .cover .current-station-name-bar .mid-text {
text-align: center;
line-height: 70px;
height: 70px;
font-size: 25px;
}
.window .page.page-front .cover .sound-bars {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
line-height: 70px;
z-index: 1;
}
.window .page.page-front .cover .sound-bars .bar {
margin-top: 125px;
transform: translateY(-50%);
height: 0;
width: 4px;
background: rgba(255, 255, 255, 0.13);
float: left;
margin-right: 3px;
animation-delay: 2s;
}
.window .page.page-front .cover .sound-bars .bar:first-child {
margin-left: 2px;
}
.window .page.page-front .cover .sound-bars .bar:last-child {
margin-right: 0;
}
.window .page.page-front .cover .sound-bars .bar.wave-1 {
animation: wave1 0.5s linear alternate infinite;
}
.window .page.page-front .cover .sound-bars .bar.wave-2 {
animation: wave2 0.7s linear alternate infinite;
}
.window .page.page-front .cover .sound-bars .bar.wave-3 {
animation: wave3 0.6s linear alternate infinite;
}
.window .page.page-front .cover .sound-bars .bar.wave-4 {
animation: wave4 0.5s linear alternate infinite;
}
.window .page.page-front .cover .sound-bars .bar.wave-5 {
animation: wave1 0.6s linear alternate infinite;
}
.window .page.page-front .cover .sound-bars .bar.wave-6 {
animation: wave2 0.7s linear alternate infinite;
}
.window .page.page-front .cover .sound-bars .bar.wave-7 {
animation: wave3 0.5s linear alternate infinite;
}
.window .page.page-front .cover .sound-bars .bar.wave-8 {
animation: wave4 0.6s linear alternate infinite;
}
.window .page.page-front .cover .sound-bars .bar.wave-9 {
animation: wave1 0.7s linear alternate infinite;
}
.window .page.page-front .cover .sound-bars .bar.wave-10 {
animation: wave2 0.5s linear alternate infinite;
}
.window .page.page-front .swipe-bar {
position: relative;
background: linear-gradient(to bottom, #381026, #462E48);
height: 0;
opacity: 0;
overflow: hidden;
}
.window .page.page-front .swipe-bar .range-ruler {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 1;
}
.window .page.page-front .swipe-bar .range-ruler .mid-line {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #7C6375;
}
.window .page.page-front .swipe-bar .range-ruler .text {
float: left;
width: 0;
margin-top: 45px;
font-size: 13px;
color: #7C6375;
text-indent: -5px;
}
.window .page.page-front .swipe-bar .range-ruler .text.long {
text-indent: -10px;
}
.window .page.page-front .swipe-bar .range-ruler .point {
width: 12px;
margin-top: 45px;
float: left;
position: relative;
}
.window .page.page-front .swipe-bar .range-ruler .point:first-child {
margin-left: 26px;
}
.window .page.page-front .swipe-bar .range-ruler .point:nth-child(6),
.window .page.page-front .swipe-bar .range-ruler .point:nth-child(13),
.window .page.page-front .swipe-bar .range-ruler .point:nth-child(20) {
width: 11px;
}
.window .page.page-front .swipe-bar .range-ruler .point::after {
position: absolute;
top: -20px;
height: 10px;
width: 1px;
background: #7C6375;
content: '';
}
.window .page.page-front .swipe-bar .range-ruler .point.long::after {
height: 20px;
top: -30px;
}
.window .page.page-front .swipe-bar .range-ruler .point::before {
position: absolute;
top: -12px;
left: -3px;
border: 3px solid #FFF;
border-radius: 10px;
content: '';
z-index: 2;
opacity: 0;
}
.window .page.page-front .swipe-bar .range-ruler .point.dot::before {
opacity: 1;
}
.window .page.page-front .swipe-bar .range {
-moz-appearance: none !important;
-webkit-appearence: none !important;
position: relative;
z-index: 2;
margin: 0 auto;
height: 67px;
width: 85%;
display: block;
background: transparent;
outline: none;
border: 0;
}
.window .page.page-front .swipe-bar .range:hover::-webkit-slider-thumb::before,
.window .page.page-front .swipe-bar .range:active::-webkit-slider-thumb::before {
opacity: 1;
transform: none;
}
.window .page.page-front .swipe-bar .range::-webkit-slider-runnable-track {
-webkit-appearance: none !important;
height: 70px;
background: transparent;
outline: none;
}
.window .page.page-front .swipe-bar .range::-webkit-slider-thumb {
-webkit-appearance: none !important;
position: relative;
height: 70px;
width: 1px;
background: #EE0085;
}
.window .page.page-front .swipe-bar .range::-webkit-slider-thumb::before {
position: absolute;
top: 28px;
left: -9px;
height: 18px;
width: 18px;
background: linear-gradient(to bottom, #FFF, #F5F5F5);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 1px 1px 3px rgba(0, 0, 0, 0.2);
border-radius: 100px;
opacity: 1;
transform: scale(0.4);
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.25, 2, 0.7, 1);
content: '';
}
.window .page.page-front .swipe-bar .range::-moz-range-track {
-moz-appearance: none !important;
height: 70px;
background: transparent;
}
.window .page.page-front .swipe-bar .range::-moz-range-thumb {
-moz-appearance: none !important;
position: relative;
width: 11px;
height: 18px;
width: 18px;
background: linear-gradient(to bottom, #FFF, #F5F5F5);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 1px 1px 3px rgba(0, 0, 0, 0.2);
border: 0;
border-radius: 100px;
}
.window .page.page-front .volume-bar {
position: relative;
background: #F7F7F7;
height: 70px;
opacity: 0;
}
.window .page.page-front .volume-bar .left-icon {
position: absolute;
top: 0;
left: 0;
height: 70px;
width: 70px;
line-height: 70px;
text-align: center;
font-size: 30px;
color: #CCC;
}
.window .page.page-front .volume-bar .range {
position: absolute;
top: 0;
right: 25px;
width: 72%;
height: 70px;
background: transparent;
margin: 0;
-webkit-appearance: none !important;
}
.window .page.page-front .volume-bar .range::-webkit-slider-runnable-track {
-webkit-appearance: none !important;
height: 70px;
background: transparent;
outline: none;
position: relative;
}
.window .page.page-front .volume-bar .range::-webkit-slider-runnable-track::after {
position: absolute;
left: 0;
right: 0;
height: 2px;
top: 50%;
background: #CCC;
content: '';
}
.window .page.page-front .volume-bar .range::-webkit-slider-thumb {
-webkit-appearance: none !important;
position: relative;
top: 27px;
left: 0;
z-index: 1;
width: 11px;
height: 18px;
width: 18px;
background: linear-gradient(to bottom, #FFF, #F5F5F5);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 1px 1px 3px rgba(0, 0, 0, 0.2);
border-radius: 100px;
}
.window .page.page-front .volume-bar .range::-moz-slider-runnable-track {
height: 70px;
background: transparent;
outline: none;
position: relative;
}
.window .page.page-front .volume-bar .range::-moz-slider-runnable-track::after {
position: absolute;
left: 0;
right: 0;
height: 2px;
top: 50%;
background: #CCC;
content: '';
}
.window .page.page-front .volume-bar .range::-moz-range-thumb {
position: relative;
top: 27px;
left: 0;
z-index: 1;
width: 11px;
height: 18px;
width: 18px;
background: linear-gradient(to bottom, #FFF, #F5F5F5);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 1px 1px 3px rgba(0, 0, 0, 0.2);
border-radius: 100px;
}
.window .page.page-saved-stations {
z-index: 1;
background: #382235;
overflow: hidden;
transition-duration: 0.3s;
opacity: 0;
pointer-events: none;
}
.window .page.page-saved-stations .station-list {
padding-top: 15px;
}
.window .page.page-saved-stations .station-list li {
display: block;
cursor: pointer;
transform: translateX(20%);
opacity: 0;
}
.window .page.page-saved-stations .station-list li .link {
color: #A38AA0;
transition-duration: 0.3s;
height: 60px;
line-height: 60px;
padding: 0 40px;
font-size: 20px;
display: block;
}
.window .page.page-saved-stations .station-list li .link:hover {
color: #FFF;
transition-duration: 0.05s;
}
.window .page.page-saved-stations .station-list li .link .bar-bouncer {
display: inline-block;
position: relative;
height: 30px;
margin-left: 20px;
}
.window .page.page-saved-stations .station-list li .link .bar-bouncer .bar {
position: absolute;
bottom: 0;
width: 4px;
background: #B447E2;
}
.window .page.page-saved-stations .station-list li .link .bar-bouncer .bar:last-child {
margin-right: 0;
}
.window .page.page-saved-stations .station-list li .link .bar-bouncer .bar1 {
left: 0;
animation: wave2 0.5s linear alternate infinite;
}
.window .page.page-saved-stations .station-list li .link .bar-bouncer .bar2 {
left: 8px;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0