doctype html
html(lang="es", dir="ltr")
head
meta(name="viewport", content="width=device-width, user-scalable=no, initial-scale=1.0")
meta(charset="utf-8")
link(rel="stylesheet", type="text/css", href="main.css")
body
audio#audio
source(src="https://raw.githubusercontent.com/ricardoolivaalonso/recursos/master/radio/radio.mp3",type="audio/mpeg")
div.svgs
svg.svg-icon(viewbox='0 0 20 20').s#son
path(d='M17.969,10c0,1.707-0.5,3.366-1.446,4.802c-0.076,0.115-0.203,0.179-0.333,0.179c-0.075,0-0.151-0.022-0.219-0.065c-0.184-0.122-0.233-0.369-0.113-0.553c0.86-1.302,1.314-2.812,1.314-4.362s-0.454-3.058-1.314-4.363c-0.12-0.183-0.07-0.43,0.113-0.552c0.186-0.12,0.432-0.07,0.552,0.114C17.469,6.633,17.969,8.293,17.969,10 M15.938,10c0,1.165-0.305,2.319-0.88,3.339c-0.074,0.129-0.21,0.201-0.347,0.201c-0.068,0-0.134-0.016-0.197-0.052c-0.191-0.107-0.259-0.351-0.149-0.542c0.508-0.9,0.776-1.918,0.776-2.946c0-1.028-0.269-2.046-0.776-2.946c-0.109-0.191-0.042-0.434,0.149-0.542c0.193-0.109,0.436-0.042,0.544,0.149C15.634,7.681,15.938,8.834,15.938,10 M13.91,10c0,0.629-0.119,1.237-0.354,1.811c-0.063,0.153-0.211,0.247-0.368,0.247c-0.05,0-0.102-0.01-0.151-0.029c-0.203-0.084-0.301-0.317-0.217-0.521c0.194-0.476,0.294-0.984,0.294-1.508s-0.1-1.032-0.294-1.508c-0.084-0.203,0.014-0.437,0.217-0.52c0.203-0.084,0.437,0.014,0.52,0.217C13.791,8.763,13.91,9.373,13.91,10 M11.594,3.227v13.546c0,0.161-0.098,0.307-0.245,0.368c-0.05,0.021-0.102,0.03-0.153,0.03c-0.104,0-0.205-0.04-0.281-0.117l-3.669-3.668H2.43c-0.219,0-0.398-0.18-0.398-0.398V7.012c0-0.219,0.179-0.398,0.398-0.398h4.815l3.669-3.668c0.114-0.115,0.285-0.149,0.435-0.087C11.496,2.92,11.594,3.065,11.594,3.227 M7.012,7.41H2.828v5.18h4.184V7.41z M10.797,4.189L7.809,7.177v5.646l2.988,2.988V4.189z')
svg.svg-icon(viewbox='0 0 20 20')#soff
path(d='M18.084,11.639c0.168,0.169,0.168,0.442,0,0.611c-0.084,0.084-0.195,0.127-0.306,0.127c-0.111,0-0.221-0.043-0.306-0.127l-1.639-1.639l-1.639,1.639c-0.084,0.084-0.195,0.127-0.306,0.127c-0.111,0-0.222-0.043-0.307-0.127c-0.168-0.169-0.168-0.442,0-0.611L15.223,10l-1.64-1.639c-0.168-0.168-0.168-0.442,0-0.61c0.17-0.169,0.442-0.169,0.612,0l1.639,1.639l1.639-1.639c0.169-0.169,0.442-0.169,0.611,0c0.168,0.168,0.168,0.442,0,0.61L16.445,10L18.084,11.639z M12.161,2.654v14.691c0,0.175-0.105,0.333-0.267,0.4c-0.054,0.021-0.109,0.032-0.166,0.032c-0.111,0-0.223-0.043-0.305-0.127l-3.979-3.979H2.222c-0.237,0-0.432-0.194-0.432-0.432V6.759c0-0.237,0.195-0.432,0.432-0.432h5.222l3.979-3.978c0.123-0.125,0.309-0.163,0.471-0.095C12.056,2.322,12.161,2.479,12.161,2.654 M7.192,7.192H2.654v5.617h4.538V7.192z M11.296,3.698l-3.24,3.241v6.123l3.24,3.24V3.698z')
div.radio#radio
div.m
div.line
div.line__front.face
div.line__back.face
div.line__right.face
div.line__left.face
div.line__top.face
div.line__bottom.face
div.line
div.line__front.face
div.line__back.face
div.line__right.face
div.line__left.face
div.line__top.face
div.line__bottom.face
div.bar
div.bar__front.face
div.bar__back.face
div.bar__right.face
div.bar__left.face
div.bar__top.face
div.bar__bottom.face
div.shadow
div.base
div.base__front.face
div.base__back.face
div.base__right.face
div.base__left.face
div.base__top.face
div.base__bottom.face
div.bb
div.bb__front.face
div.screen
div.bb__back.face
div.bb__right.face
div.bb__left.face
div.bb__top.face
div.bb__bottom.face
div.bf
div.bf__front.face
div.speakers
div.speaker.speaker--1
div.speaker__front.face.sa
div.speaker__back.face.sa
div.speaker__right.face.sa
div.speaker__left.face.sa
div.speaker__top.face.sa
div.speaker__bottom.face.sa
div.speaker.speaker--2
div.speaker__front.face.sa
div.speaker__back.face.sa
div.speaker__right.face.sa
div.speaker__left.face.sa
div.speaker__top.face.sa
div.speaker__bottom.face.sa
div.cas
div.cas__front.face
div.cas__back.face
div.cas__right.face
div.cas__left.face
div.cas__top.face
div.cass
div.cas__bottom.face
div.buttons
div.button
div.button__front.face
div.button__back.face
div.button__right.face
div.button__left.face
div.button__top.face
div.button__bottom.face
div.button
div.button__front.face
div.button__back.face
div.button__right.face
div.button__left.face
div.button__top.face
div.button__bottom.face
div.button
div.button__front.face
div.button__back.face
div.button__right.face
div.button__left.face
div.button__top.face
div.button__bottom.face
div.button
div.button__front.face
div.button__back.face
div.button__right.face
div.button__left.face
div.button__top.face
div.button__bottom.face
div.button
div.button__front.face
div.button__back.face
div.button__right.face
div.button__left.face
div.button__top.face
div.button__bottom.face
div.bf__back.face
div.bf__right.face
div.bf__left.face
div.bf__top.face
div.bf__bottom.face
div.c
div.controls
div.control.control--cta
div.control__front.face
div.control__back.face
div.control__right.face
div.control__left.face
div.control__top.face
div.control__bottom.face
div.control
div.control__front.face
div.control__back.face
div.control__right.face
div.control__left.face
div.control__top.face
div.control__bottom.face
div.control.control--cta
div.control__front.face
div.control__back.face
div.control__right.face
div.control__left.face
div.control__top.face
div.control__bottom.face
div.control
div.control__front.face
div.control__back.face
div.control__right.face
div.control__left.face
div.control__top.face
div.control__bottom.face
div.controls
div.control.control--cta
div.control__front.face
div.control__back.face
div.control__right.face
div.control__left.face
div.control__top.face
div.control__bottom.face
div.control.control--cta
div.control__front.face
div.control__back.face
div.control__right.face
div.control__left.face
div.control__top.face
div.control__bottom.face
div.control
div.control__front.face
div.control__back.face
div.control__right.face
div.control__left.face
div.control__top.face
div.control__bottom.face
div.control
div.control__front.face
div.control__back.face
div.control__right.face
div.control__left.face
div.control__top.face
div.control__bottom.face
div.controls
div.control.control--cta
div.control__front.face
div.control__back.face
div.control__right.face
div.control__left.face
div.control__top.face
div.control__bottom.face
div.control.control--ct2
div.control__front.face
div.control__back.face
div.control__right.face
div.control__left.face
div.control__top.face
div.control__bottom.face
div.keys.keys--1
div.key
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face
div.key__bottom.face
div.key
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face
div.key__bottom.face
div.key
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face
div.key__bottom.face
div.key
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face
div.key__bottom.face
div.key.key--cta
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face
div.key__bottom.face
div.keys.keys--2
div.key.key--cta
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face
div.key__bottom.face
div.key.key--cta
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face
div.key__bottom.face
div.keys.keys--3
div.key.key--cta2
div.key__front.face
div.key__back.face
div.key__right.face
div.key__left.face
div.key__top.face
div.key__bottom.face
script(src="main.js")
$bg-1: #F498AD;
$bg-2: #be4e67;
$radio-1: #00FFF0;
$radio-2: #00DBCD;
$radio-3: #23BAA8;
$radio-4: #13B2A9;
$key-a1: #EEDB73;
$key-a2: #d6c35a;
$key-a3: #bba83a;
$key-b1: #f2f2f2;
$key-b2: #dddddd;
$key-b3: #b3b3b3;
$key-c1: complement(#EEDB73);
$key-c2: complement(#d6c35a);
$key-c3: complement(#c4b041);
/***********************/
/***********************/
@mixin cube($width, $height, $depth) {
&__front{ @include cube-front($width, $height, $depth); }
&__back{ @include cube-back($width, $height, $depth); }
&__right{ @include cube-right($width, $height, $depth); }
&__left{ @include cube-left($width, $height, $depth); }
&__top{ @include cube-top($width, $height, $depth);}
&__bottom{ @include cube-bottom($width, $height, $depth); }
}
/************************/
/* Mixin para crear cubo ( Caras siempre al frente ) */
/************************/
@mixin cube-front($width, $height, $depth) {
width: $width;
height: $height;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ( -($height - ($depth * 2) ) );
}
@mixin cube-back($width, $height, $depth) {
width: $width;
height: $height;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-$width) translateY(-$height) ;
}
@mixin cube-right($width, $height, $depth) {
width: $depth * 2;
height: $height;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ($width) translateX(-$depth * 2) translateY(-$height);
}
@mixin cube-left($width, $height, $depth) {
width: $depth * 2;
height: $height;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-$height);
}
@mixin cube-top($width, $height, $depth) {
width: $width;
height: $depth * 2;
transform-origin: top left;
transform: translateZ($height) ;
}
@mixin cube-bottom($width, $height, $depth) {
width: $width;
height: $depth * 2;
transform-origin: top left;
transform: rotateY(180deg) translateX(-$width);
}
/***********************/
/***********************/
@mixin face-ani($animation, $time, $side, $width-el, $height-el, $depth-el) {
animation: #{$animation} #{$time} infinite ease;
@keyframes #{$animation} {
0%, 15%, 45%, 60%, 62%, 68%{
@if $side == "cube-front" { @include cube-front($width-el, $height-el, $depth-el); }
@else if $side == "cube-back" { @include cube-back($width-el, $height-el, $depth-el); }
@else if $side == "cube-right" { @include cube-right($width-el, $height-el, $depth-el); }
@else if $side == "cube-left" { @include cube-left($width-el, $height-el, $depth-el); }
@else if $side == "cube-top" { @include cube-top($width-el, $height-el, $depth-el); }
}
20%, 40%, 58%, 64%, 70%, 100%{
@if $side == "cube-front" { @include cube-front($width-el, $height-finish, $depth-el); }
@else if $side == "cube-back" { @include cube-back($width-el, $height-finish, $depth-el); }
@else if $side == "cube-right" { @include cube-right($width-el, $height-finish, $depth-el); }
@else if $side == "cube-left" { @include cube-left($width-el, $height-finish, $depth-el); }
@else if $side == "cube-top" { @include cube-top($width-el, $height-finish, $depth-el); }
}
}
}
/**/
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
transform-style: preserve-3d;
-webkit-tap-highlight-color: transparent;
}
/* Generic */
body{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
overflow: hidden;
background-image: linear-gradient(120deg, lighten($bg-1, 5), $bg-1, darken( $bg-1, 8) );
cursor: pointer;
}
.face{ position: absolute; }
.svgs{
position: absolute;
left: 50%;
bottom: 50px;
transform: translateX(-50%);
}
.svg-icon {
width: 30px;
height: 30px;
&:hover{ transform: scale(1.1);}
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: $key-b1;
}
.svg-icon circle {
stroke: white;
stroke-width: 1;
}
.s{ display: none; }
/***************/
.radio{
position: relative;
width: 28vw;
height: 9vw;
transform:
perspective(10000px)
rotateX(55deg)
rotateZ(33deg)
scale(.8)
translateZ(-9vw)
;
}
.radio-a{ animation: radio-a infinite 1s alternate 1.5s; }
/******************/
.m{
margin-top: 1.5vw;
transform-origin: top left;
transform: rotateX(10deg);
}
$width-el: .5vw;
$height-el: 9vw;
$depth-el: 1vw;
.line{
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el;
position: absolute;
top: 0;
transform: translateZ(8vw);
&:nth-of-type(1){ right: -.5vw; }
&:nth-of-type(2){ left: -.5vw; }
&__front{ background-color: darken($key-c2, 1) ; }
&__back{ background-color: darken($key-c3, 1); }
&__right{
background-color: darken($key-c3, 1);
&::before{
content: '';
position: absolute;
width: 1vw;
height: 1vw;
bottom: .75vw;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
background-color: $key-b1;
}
}
&__left{ background-color: darken($key-c3, 1); }
&__top{ background-color: darken($key-c1, 1); }
&__bottom{ background-color: darken($key-c3, 1); }
}
$width-el: 29vw;
$height-el: .5vw;
$depth-el: 1vw;
.bar{
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el;
position: absolute;
top: 0;
left: -.5vw;
transform: translateZ(16.5vw);
&__front{ background-color: darken($key-c2, 1) ; }
&__back{ background-color: darken($key-c3, 1); }
&__right{ background-color: darken($key-c3, 1); }
&__left{ background-color: darken($key-c1, 1); }
&__top{ background-color: darken($key-c1, 1); }
&__bottom{ background-color: darken($key-c3, 1); }
}
/******************/
$width-el: 26vw;
$height-el: .75vw;
$depth-el: 4vw;
.base{
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el;
position: absolute;
top: .5vw;
left: 1vw;
&__front{ background-image: linear-gradient(to right, lighten($radio-4, 7), darken($radio-4, 4)) ; }
&__back{ background-color: darken($radio-3, 5); }
&__right{ background-color: darken($radio-3, 5); }
&__left{ background-color: darken($radio-3, 5); }
&__top{ background-color: darken($radio-3, 5); }
&__bottom{ background-color: darken($radio-3, 5); }
}
//----------------------
$width-el: 28vw;
$height-el: 12vw;
$depth-el: 1vw;
.bb{
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el;
position: absolute;
top: 0;
left: 0;
transform: translateZ(1vw);
&__front{ background-image: linear-gradient(to bottom, $radio-2 2.8vw , darken($radio-4, 5) 3.4vw); }
&__back{ background-color: $radio-3; }
&__right{ background-image: linear-gradient(to bottom, $radio-3 , darken($radio-4, 2) ) ; }
&__left{ background-color: $radio-1; }
&__top{ background-image: linear-gradient(to right, lighten($radio-1, 30), $radio-1) ; }
&__bottom{ background-color: $radio-3; }
}
//----------------------
$width-el: 27.5vw;
$height-el: 9vw;
$depth-el: 3.5vw;
.bf{
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el;
position: absolute;
top: 2vw;
left: .25vw;
transform: translateZ(1vw);
&__front{ background-color: $radio-2 ; }
&__back{ background-color: $radio-3; }
&__right{ background-image: linear-gradient(to bottom, $radio-3 , darken($radio-4, 2) ) ; }
&__left{ background-color: $radio-1; }
&__top{ background-image: linear-gradient(to right, lighten($radio-1, 30), $radio-1) ; }
&__bottom{ background-color: $radio-3; }
}
/****************/
/****************/
.screen{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: .5vw;
left: .5vw;
width: 27vw;
height: 2vw;
overflow: hidden;
box-shadow:
inset .15vw -.25vw .1vw $radio-1,
inset -.15vw .15vw .1vw darken($radio-2, 5);
background-color: rgba($radio-2, .5);
&::before{
content: '';
position: absolute;
width: 90%;
height: .2vw;
background-color: $key-b1;
box-shadow:
.05vw .05vw .075vw darken($radio-2, 10),
-.05vw -.05vw .075vw darken($radio-2, 10),
-.05vw .05vw .075vw darken($radio-2, 10),
.05vw -.05vw .075vw darken($radio-2, 10);
}
&::after{
content: '';
position: absolute;
width: .2vw;
height: 1vw;
background-color: $key-c2;
box-shadow:
.05vw .05vw .075vw darken($radio-2, 10),
-.05vw -.05vw .075vw darken($radio-2, 10),
-.05vw .05vw .075vw darken($radio-2, 10),
.05vw -.05vw .075vw darken($radio-2, 10);
animation: indicator 8s infinite alternate;
}
}
.shadow{
position: absolute;
width: 120%;
height: 200%;
bottom: 0;
left: 0;
overflow: hidden;
&::before,
&::after{
content: '';
position: absolute;
width: 28vw;
height: 100%;
bottom: 0;
left: 0;
transform-origin: bottom left;
transform: skewX(-15deg);
background-image: linear-gradient(to right, $bg-2, darken($bg-2, 5) );
}
&::after{
height: 100%;
bottom: 0;
left: 9%;
transform: skewX(-15deg) skewY(8deg);
}
}
//----------------------
.keys{
display: flex;
position: absolute;
height: 1.1vw;
bottom: 1vw;
background-color: $radio-3;
&::before{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 120%;
transform-origin: left bottom;
transform: skewX(-10deg);
background-color: $radio-3;
animation: key-shadow 3s infinite;
}
&--1{
left: 50%;
transform: translateZ(10vw) translateX(-50%);
}
&--2{
left: 2vw;
transform: translateZ(10vw);
}
&--3{
right: 2vw;
transform: translateZ(10vw);
}
}
//----------------------
$width-el: 1.25vw;
$height-el: .75vw;
$depth-el: .5vw;
$height-finish: .5vw;
.key{
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el;
margin: 0 .125vw;
&__front{ background-color: $key-b2; }
&__back{ background-color: $key-b3; }
&__right{ background-color: $key-b3; }
&__left{ background-color: $key-b1; }
&__top{ background-color: $key-b1;}
&__bottom{ background-color: $key-b3; }
&:nth-of-type(2){
.key__top{ animation: key 1s infinite;}
}
&--cta{
.key__front{
background-color: $key-a2;
@include face-ani(grow-front-key, 5s, cube-front, $width-el, $height-el, $depth-el);
}
.key__back{
background-color: $key-a3;
@include face-ani(grow-back-key, 5s, cube-back, $width-el, $height-el, $depth-el);
}
.key__right{
background-color: $key-a3;
@include face-ani(grow-right-key, 5s, cube-right, $width-el, $height-el, $depth-el);
}
.key__left{
background-color: $key-a1;
@include face-ani(grow-left-key, 5s, cube-left, $width-el, $height-el, $depth-el);
}
.key__top{
background-color: $key-a1;
@include face-ani(grow-top-key, 5s, cube-top, $width-el, $height-el, $depth-el);
}
.key__bottom{ background-color: $key-a3; }
&:nth-of-type(2){
.key__front{ @include face-ani(grow-front-key, 3s, cube-front, $width-el, $height-el, $depth-el); }
.key__back{ @include face-ani(grow-back-key, 3s, cube-back, $width-el, $height-el, $depth-el); }
.key__right{ @include face-ani(grow-right-key, 3s, cube-right, $width-el, $height-el, $depth-el); }
.key__left{ @include face-ani(grow-left-key, 3s, cube-left, $width-el, $height-el, $depth-el); }
.key__top{ @include face-ani(grow-top-key, 3s, cube-top, $width-el, $height-el, $depth-el); }
}
}
&--cta2{
transform: scaleZ(.5);
.key__front{ background-color: $key-c2; }
.key__back{ background-color: $key-c3; }
.key__right{ background-color: $key-c3; }
.key__left{ background-color: $key-c1; }
.key__top{ background-color: $key-c1; }
.key__bottom{ background-color: $key-c3; }
}
}
//----------------------
.speakers{
position: absolute;
top: 0;
left: 0;
width: 100%;;
height: 100%;
}
$width-el: 6vw;
$height-el: .6vw;
$height-finish: 1vw;
$depth-el: 3vw;
.speaker{
@include cube($width-el, $height-el, $depth-el);
position: absolute;
top: 1.5vw;
&::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 6.35vw;
height: 6.65vw;
background-color: rgba($radio-3, .5);
animation: speaker-shadow 1s infinite;
}
&--1{ left: calc(100% - 8vw); }
&--2{ right: calc(100% - 2vw); }
&__front{ background-color: $key-b3; }
&__back{ background-color: $key-b1; }
&__right{ background-color: $key-b3; }
&__left{ background-color: $key-b1; }
&__top{ background-image: linear-gradient(to right, lighten($key-b2, 5), $key-b2); }
&__bottom{ background-color: $key-b3; }
}
.sfa{ @include face-ani(grow-front-speaker, 1s, cube-front, $width-el, $height-el, $depth-el); }
.sba{ @include face-ani(grow-back-speaker, 1s, cube-back, $width-el, $height-el, $depth-el); }
.sra{ @include face-ani(grow-right-speaker, 1s, cube-right, $width-el, $height-el, $depth-el); }
.sla{ @include face-ani(grow-left-speaker, 1s, cube-left, $width-el, $height-el, $depth-el); }
.sta{ @include face-ani(grow-top-speaker, 1s, cube-top, $width-el, $height-el, $depth-el); }
//----------------------
.controls{
display: flex;
position: absolute;
top: 2vw;
width: 5vw;
height: 2.5vw;
transform: translateZ(10vw) ;
&:nth-of-type(1){ left: 2vw; }
&:nth-of-type(2){ right: 1vw; }
&:nth-of-type(3){ left: 45%; }
}
$width-el: .5vw;
$height-el: .25vw;
$depth-el: .25vw;
.control{
@include cube($width-el, $height-el, $depth-el);
display: flex;
justify-content: center;
width: .35vw;
height: 2.25vw;
margin: 0 .3vw;
background-color: rgba($radio-3, .35);
border-radius: 1vw;
&::before{
content: '';
position: absolute;
width: .6vw;
height: .6vw;
background-color: $radio-3;
box-shadow:
inset .15vw -.25vw .1vw $radio-1,
inset -.15vw .15vw .1vw darken($radio-2, 5);
background-color: rgba($radio-2, .5);
}
&__front{ background-color: $key-a2; }
&__back{ background-color: $key-a3; }
&__right{ background-color: $key-a3; }
&__left{ background-color: $key-a1; }
&__top{ background-color: $key-a1; }
&__bottom{ background-color: $key-a3; }
&--cta{
align-items: center ;
.control__front{ background-color: $key-b2; }
.control__back{ background-color: $key-b3; }
.control__right{ background-color: $key-b3; }
.control__left{ background-color: $key-b1; }
.control__top{ background-color: $key-b1; }
.control__bottom{ background-color: $key-b3; }
}
&--ct2{
.control__front{ background-color: $key-c2; }
.control__back{ background-color: $key-c3; }
.control__right{ background-color: $key-c3; }
.control__left{ background-color: $key-c1; }
.control__top{ background-color: $key-c1; }
.control__bottom{ background-color: $key-c3; }
}
}
//----------------------
$width-el: 7vw;
$height-el: .5vw;
$depth-el: 2.25vw;
.cas{
@include cube($width-el, $height-el, $depth-el);
position: absolute;
top: 1.5vw;
left: 10vw;
&::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 7.25vw;
height: 5vw;
background-color: rgba($radio-3, .5);
}
&__front{ background-color: $key-b3; }
&__back{ background-color: $key-b1; }
&__right{ background-color: $key-b3; }
&__left{ background-color: $key-b1; }
&__top{ background-color: $key-b2; }
&__bottom{ background-color: $key-b3; }
}
.cass{
position: absolute;
width: 80%;
height: 70%;
left: 10%;
top: 10%;
border: .75vw solid $key-c3;
&::before,
&::after{
content: '';
position: absolute;
height: 1vw;
width: 1vw;
top: .35vw;
left: .35vw;
background-color: $key-c3;
border-radius: 50%;
}
&::after{
left: calc(100% - 1.5vw);
}
}
//----------------------
.buttons{
display: flex;
position: absolute;
bottom: 1.5vw;
left: 10vw;
width: 7vw;
height: 1vw;
transform-origin: top left;
&::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 7.25vw;
height: 1.9vw;
background-color: rgba($radio-3, .5);
}
}
//----------------------
$width-el: 1.25vw;
$height-el: .75vw;
$depth-el: .5vw;
.button{
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el;
margin: 0 .125vw;
@for $i from 1 through 21 {
&:nth-of-type(#{$i}) {
animation: key-down-white .5s infinite alternate #{$i / 15 }s;
}
}
&__front{ background-color: $key-b3;}
&__back{ background-color: $key-b1; }
&__right{ background-color: $key-b3; }
&__left{ background-color: $key-b1; }
&__top{ background-image: linear-gradient(to right, lighten($key-b2, 2), $key-b2); }
&__bottom{ background-color: $key-b3; }
}
/*******************/
/*******************/
@keyframes speaker-shadow {
0%, 25%, 45%, 60%, 62%, 68%, 92%, 100%{
width: 6.35vw;
height: 6.65vw;
}
30%, 40%, 58%, 64%, 70%, 90%{
width: 6.4vw;
height: 6.7vw;
}
}
@keyframes key-shadow {
0%, 25%, 45%, 60%, 62%, 68%, 92%, 100%{
width: 100%;
height: 120%;
}
30%, 40%, 58%, 64%, 70%, 90%{
width: 100%;
height: 110%;
}
}
@keyframes indicator {
0%, 10%, 70%{ transform: translateX(-4vw);}
20%, 30%, 80%, 90%, 100%{ transform: translateX(0vw);}
25%, 60%, 95%{ transform: translateX(-1vw);}
35%, 50%{ transform: translateX(2vw);}
38%, 45%, 52%{ transform: translateX(4vw);}
}
@keyframes key {
0%, 20%{ background-color: $key-a1; }
100%{ background-color: lighten($key-a1, 15); }
}
@keyframes key-down-white {
0%{
transform: translateY(0);
transform-origin: center;
}
30%, 100%{
transform: translateY(.25vw) ;
transform-origin: center;
}
}
@keyframes radio-a {
0%, 15%, 45%, 60%, 62%, 68%{
transform:
perspective(10000px)
rotateX(55deg)
rotateZ(33deg)
scale(.8)
translateZ(-9vw)
;
}
20%, 40%, 58%, 64%, 70%, 100%{
transform:
perspective(10000px)
rotateX(53deg)
rotateZ(33deg)
scale(.8)
translateZ(-9vw)
;
}
}
/*
Designed by: Emil Ismailov
Original image: https://dribbble.com/shots/5089813-90-s-Music-Player
*/
let b = document.body;
let radio = document.querySelector("#radio");
let a = document.querySelector("#audio");
let sfa = document.querySelectorAll(".speaker__front");
let sta = document.querySelectorAll(".speaker__top");
let sba = document.querySelectorAll(".speaker__back");
let sla = document.querySelectorAll(".speaker__left");
let sra = document.querySelectorAll(".speaker__right");
let son = document.querySelector("#son");
let soff = document.querySelector("#soff");
/*******************/
let playAudio = () => {
a.loop = true;
if (a.paused) a.play();
else {
a.pause();
a.currentTime = 0;
}
sfa.forEach( f => f.classList.toggle("sfa") );
sta.forEach( f => f.classList.toggle("sta") );
sba.forEach( f => f.classList.toggle("sba") );
sla.forEach( f => f.classList.toggle("sla") );
sra.forEach( f => f.classList.toggle("sra") );
radio.classList.toggle("radio-a")
son.classList.toggle("s")
soff.classList.toggle("s")
}
/*******************/
b.addEventListener("click", playAudio)
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.