Web radio
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
radio/css/style.css

208 lines
3.3 KiB

5 years ago
body {
5 years ago
background-color: rgb(62, 50, 64);
5 years ago
}
.parent {
width: 100%;
height: 100%;
position: fixed;
top: 0;
background: url(/pic/bg.jpg) no-repeat center center / cover;
left: 0;
display: flex;
align-items: center;
5 years ago
align-content: center;
justify-content: center;
overflow: auto;
}
5 years ago
#RadioBox{
width: 410px;
height: 350px;
5 years ago
background-color: rgba(0, 0, 0, 0.7);
5 years ago
border-radius: 10px;
padding: 0 5px;
5 years ago
color: #fff;
5 years ago
}
5 years ago
.tagBOX{
width: 410px;
height: 150px;
}
.tagA {
width: 100%;
5 years ago
height: 20px;
border-radius: 5px 5px 0 0;
5 years ago
border: #f54e4e;
5 years ago
background-color: #000;
5 years ago
color: #fff;
transition: 0.5s ease all;
outline: none;
cursor: pointer;
text-align: center;
5 years ago
margin-left: auto;
margin-right: auto
}
5 years ago
5 years ago
.tagA:hover {
color: #000;
background-color: #fff;
5 years ago
}
5 years ago
.tagB {
width: 100%;
5 years ago
height: 20px;
border-radius: 0;
border: #f54e4e;
5 years ago
background-color: #fff;
5 years ago
color: #000;
transition: 0.5s ease all;
outline: none;
text-align: center;
margin-left: auto;
margin-right: auto
5 years ago
}
5 years ago
.tagC {
width: 100%;
5 years ago
height: 20px;
border-radius: 0;
border: #f54e4e;
background-color: #000;
color: #fff;
transition: 0.5s ease all;
outline: none;
cursor: pointer;
text-align: center;
margin-left: auto;
margin-right: auto
}
.tagC:hover {
color: #000;
background-color: #fff;
}
.tagD {
width: 100%;
//height: 20px;
5 years ago
border-radius: 0 0 5px 5px;
border: #f54e4e;
background-color: #fff;
color: #000;
transition: 0.5s ease all;
outline: none;
text-align: center;
margin-left: auto;
margin-right: auto
5 years ago
}
5 years ago
h1::before {
content: '';
display: inline-block;
margin:0 10px;
width: 25px;
height: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: red;
animation: blink 3s linear infinite;
}
@keyframes blink{
0%{opacity: 0;}
25%{opacity: .5;}
50%{opacity: 1;}
75%{opacity: .5;}
100%{opacity: 0;}
}
5 years ago
h1 {
text-align: center
5 years ago
float:left;
margin:10px 50px;
5 years ago
}
5 years ago
.btn {
width: 100px;
height: 60px;
border-radius: 5px;
border: #f54e4e;
background-color: #000;
color: #fff;
transition: 0.5s ease all;
outline: none;
cursor: pointer;
text-align: center;
margin: auto;
justify-content : center;
}
.btn:hover {
color: #000;
background-color: #fff;
}
.btn-wrap {
max-width: 250px;
margin: auto;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
5 years ago
DIV {
5 years ago
text-align: center
5 years ago
}
@-webkit-keyframes scroll {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0)
}
}
@-moz-keyframes scroll {
0% {
-moz-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-moz-transform: translate(-100%, 0);
transform: translate(-100%, 0)
}
}
@keyframes scroll {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0)
}
}
.marquee {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.marquee span {
display: inline-block;
padding-left: 100%;
-webkit-animation: scroll 15s infinite linear;
-moz-animation: scroll 15s infinite linear;
animation: scroll 15s infinite linear;
}