Latest
Loading...

Animated Music Player Using HTML CSS & Js With Source Code | CodeWithNinju

codewithninjuby 4 years ago   in Source Code 1 comments
chrome_cYhyuI3ytX

 Animated Music Player Using HTML  CSS & Js  With Source Code


chrome_cYhyuI3ytX




  • Source Code Of Animated Music player Are Below You can Copy Past It OR You can download It Using Link 
  • Link is Given After This Code

  1. Index.html


<!-- index.html -->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Music</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!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">
</head>
<body>
<audio id="audio">
<source src="https://pwdown.com/113462/Rasode%20Me%20Kon%20Tha%20-%20Full.mp3" type="audio/mpeg">
</audio>
<div class="svgs">
<svg class="svg-icon s" viewbox="0 0 20 20" id="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"></path>
</svg>
<svg class="svg-icon" viewbox="0 0 20 20" id="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"></path>
</svg>
</div>
<div class="radio" id="radio">
<div class="m">
<div class="line">
<div class="line__front face"> </div>
<div class="line__back face"> </div>
<div class="line__right face"> </div>
<div class="line__left face"> </div>
<div class="line__top face"> </div>
<div class="line__bottom face"> </div>
</div>
<div class="line">
<div class="line__front face"> </div>
<div class="line__back face"> </div>
<div class="line__right face"> </div>
<div class="line__left face"> </div>
<div class="line__top face"> </div>
<div class="line__bottom face"> </div>
</div>
<div class="bar">
<div class="bar__front face"> </div>
<div class="bar__back face"> </div>
<div class="bar__right face"> </div>
<div class="bar__left face"> </div>
<div class="bar__top face"> </div>
<div class="bar__bottom face"> </div>
</div>
</div>
<div class="shadow"></div>
<div class="base">
<div class="base__front face"> </div>
<div class="base__back face"> </div>
<div class="base__right face"> </div>
<div class="base__left face"> </div>
<div class="base__top face"> </div>
<div class="base__bottom face"> </div>
</div>
<div class="bb">
<div class="bb__front face">
<div class="screen"></div>
</div>
<div class="bb__back face"> </div>
<div class="bb__right face"> </div>
<div class="bb__left face"> </div>
<div class="bb__top face"> </div>
<div class="bb__bottom face"> </div>
</div>
<div class="bf">
<div class="bf__front face">
<div class="speakers">
<div class="speaker speaker--1">
<div class="speaker__front face sa"> </div>
<div class="speaker__back face sa"> </div>
<div class="speaker__right face sa"> </div>
<div class="speaker__left face sa"> </div>
<div class="speaker__top face sa"></div>
<div class="speaker__bottom face sa"> </div>
</div>
<div class="speaker speaker--2">
<div class="speaker__front face sa"> </div>
<div class="speaker__back face sa"> </div>
<div class="speaker__right face sa"> </div>
<div class="speaker__left face sa"> </div>
<div class="speaker__top face sa"> </div>
<div class="speaker__bottom face sa"> </div>
</div>
<div class="cas">
<div class="cas__front face"> </div>
<div class="cas__back face"> </div>
<div class="cas__right face"> </div>
<div class="cas__left face"> </div>
<div class="cas__top face">
<div class="cass"></div>
</div>
<div class="cas__bottom face"> </div>
</div>
<div class="buttons">
<div class="button">
<div class="button__front face"> </div>
<div class="button__back face"> </div>
<div class="button__right face"> </div>
<div class="button__left face"> </div>
<div class="button__top face"> </div>
<div class="button__bottom face"> </div>
</div>
<div class="button">
<div class="button__front face"> </div>
<div class="button__back face"> </div>
<div class="button__right face"> </div>
<div class="button__left face"> </div>
<div class="button__top face"> </div>
<div class="button__bottom face"> </div>
</div>
<div class="button">
<div class="button__front face"> </div>
<div class="button__back face"> </div>
<div class="button__right face"> </div>
<div class="button__left face"> </div>
<div class="button__top face"> </div>
<div class="button__bottom face"> </div>
</div>
<div class="button">
<div class="button__front face"> </div>
<div class="button__back face"> </div>
<div class="button__right face"> </div>
<div class="button__left face"> </div>
<div class="button__top face"> </div>
<div class="button__bottom face"> </div>
</div>
<div class="button">
<div class="button__front face"> </div>
<div class="button__back face"> </div>
<div class="button__right face"> </div>
<div class="button__left face"> </div>
<div class="button__top face"> </div>
<div class="button__bottom face"> </div>
</div>
</div>
</div>
</div>
<div class="bf__back face"> </div>
<div class="bf__right face"> </div>
<div class="bf__left face"> </div>
<div class="bf__top face"> </div>
<div class="bf__bottom face"> </div>
</div>
<div class="c">
<div class="controls">
<div class="control control--cta">
<div class="control__front face"> </div>
<div class="control__back face"> </div>
<div class="control__right face"> </div>
<div class="control__left face"> </div>
<div class="control__top face"> </div>
<div class="control__bottom face"> </div>
</div>
<div class="control">
<div class="control__front face"> </div>
<div class="control__back face"> </div>
<div class="control__right face"> </div>
<div class="control__left face"> </div>
<div class="control__top face"> </div>
<div class="control__bottom face"> </div>
</div>
<div class="control control--cta">
<div class="control__front face"> </div>
<div class="control__back face"> </div>
<div class="control__right face"> </div>
<div class="control__left face"> </div>
<div class="control__top face"> </div>
<div class="control__bottom face"> </div>
</div>
<div class="control">
<div class="control__front face"> </div>
<div class="control__back face"> </div>
<div class="control__right face"> </div>
<div class="control__left face"> </div>
<div class="control__top face"> </div>
<div class="control__bottom face"> </div>
</div>
</div>
<div class="controls">
<div class="control control--cta">
<div class="control__front face"> </div>
<div class="control__back face"> </div>
<div class="control__right face"> </div>
<div class="control__left face"> </div>
<div class="control__top face"> </div>
<div class="control__bottom face"> </div>
</div>
<div class="control control--cta">
<div class="control__front face"> </div>
<div class="control__back face"> </div>
<div class="control__right face"> </div>
<div class="control__left face"> </div>
<div class="control__top face"> </div>
<div class="control__bottom face"> </div>
</div>
<div class="control">
<div class="control__front face"> </div>
<div class="control__back face"> </div>
<div class="control__right face"> </div>
<div class="control__left face"> </div>
<div class="control__top face"> </div>
<div class="control__bottom face"> </div>
</div>
<div class="control">
<div class="control__front face"> </div>
<div class="control__back face"> </div>
<div class="control__right face"> </div>
<div class="control__left face"> </div>
<div class="control__top face"> </div>
<div class="control__bottom face"> </div>
</div>
</div>
<div class="controls">
<div class="control control--cta">
<div class="control__front face"> </div>
<div class="control__back face"> </div>
<div class="control__right face"> </div>
<div class="control__left face"> </div>
<div class="control__top face"> </div>
<div class="control__bottom face"> </div>
</div>
<div class="control control--ct2">
<div class="control__front face"> </div>
<div class="control__back face"> </div>
<div class="control__right face"> </div>
<div class="control__left face"> </div>
<div class="control__top face"> </div>
<div class="control__bottom face"> </div>
</div>
</div>
</div>
<div class="keys keys--1">
<div class="key">
<div class="key__front face"> </div>
<div class="key__back face"> </div>
<div class="key__right face"> </div>
<div class="key__left face"> </div>
<div class="key__top face"> </div>
<div class="key__bottom face"> </div>
</div>
<div class="key">
<div class="key__front face"> </div>
<div class="key__back face"> </div>
<div class="key__right face"> </div>
<div class="key__left face"> </div>
<div class="key__top face"> </div>
<div class="key__bottom face"> </div>
</div>
<div class="key">
<div class="key__front face"> </div>
<div class="key__back face"> </div>
<div class="key__right face"> </div>
<div class="key__left face"> </div>
<div class="key__top face"> </div>
<div class="key__bottom face"> </div>
</div>
<div class="key">
<div class="key__front face"> </div>
<div class="key__back face"> </div>
<div class="key__right face"> </div>
<div class="key__left face"> </div>
<div class="key__top face"> </div>
<div class="key__bottom face"> </div>
</div>
<div class="key key--cta">
<div class="key__front face"> </div>
<div class="key__back face"> </div>
<div class="key__right face"> </div>
<div class="key__left face"> </div>
<div class="key__top face"> </div>
<div class="key__bottom face"> </div>
</div>
</div>
<div class="keys keys--2">
<div class="key key--cta">
<div class="key__front face"> </div>
<div class="key__back face"> </div>
<div class="key__right face"> </div>
<div class="key__left face"> </div>
<div class="key__top face"> </div>
<div class="key__bottom face"> </div>
</div>
<div class="key key--cta">
<div class="key__front face"> </div>
<div class="key__back face"> </div>
<div class="key__right face"> </div>
<div class="key__left face"> </div>
<div class="key__top face"> </div>
<div class="key__bottom face"> </div>
</div>
</div>
<div class="keys keys--3">
<div class="key key--cta2">
<div class="key__front face"> </div>
<div class="key__back face"> </div>
<div class="key__right face"> </div>
<div class="key__left face"> </div>
<div class="key__top face"> </div>
<div class="key__bottom face"> </div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
<script src="./script.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
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)
view raw script.js hosted with ❤ by GitHub
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-tap-highlight-color: transparent;
}
/* Generic */
body {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
width: 100%;
height: 100vh;
overflow: hidden;
background-image: linear-gradient(120deg, #f6afbf, #F498AD, #f07390);
cursor: pointer;
}
.face {
position: absolute;
}
.svgs {
position: absolute;
left: 50%;
bottom: 50px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.svg-icon {
width: 30px;
height: 30px;
}
.svg-icon:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #f2f2f2;
}
.svg-icon circle {
stroke: white;
stroke-width: 1;
}
.s {
display: none;
}
/***************/
.radio {
position: relative;
width: 28vw;
height: 9vw;
-webkit-transform: perspective(10000px) rotateX(55deg) rotateZ(33deg) scale(0.8) translateZ(-9vw);
transform: perspective(10000px) rotateX(55deg) rotateZ(33deg) scale(0.8) translateZ(-9vw);
}
.radio-a {
-webkit-animation: radio-a infinite 1s alternate 1.5s;
animation: radio-a infinite 1s alternate 1.5s;
}
/******************/
.m {
margin-top: 1.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(10deg);
transform: rotateX(10deg);
}
.line {
width: 0.5vw;
height: 1vw;
position: absolute;
top: 0;
-webkit-transform: translateZ(8vw);
transform: translateZ(8vw);
}
.line__front {
width: 0.5vw;
height: 9vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(-7vw);
transform: rotateX(-90deg) translateZ(-7vw);
}
.line__back {
width: 0.5vw;
height: 9vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-9vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-9vw);
}
.line__right {
width: 2vw;
height: 9vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-2vw) translateY(-9vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-2vw) translateY(-9vw);
}
.line__left {
width: 2vw;
height: 9vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-9vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-9vw);
}
.line__top {
width: 0.5vw;
height: 2vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(9vw);
transform: translateZ(9vw);
}
.line__bottom {
width: 0.5vw;
height: 2vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-0.5vw);
transform: rotateY(180deg) translateX(-0.5vw);
}
.line:nth-of-type(1) {
right: -.5vw;
}
.line:nth-of-type(2) {
left: -.5vw;
}
.line__front {
background-color: #5669d5;
}
.line__back {
background-color: #3d52c3;
}
.line__right {
background-color: #3d52c3;
}
.line__right::before {
content: '';
position: absolute;
width: 1vw;
height: 1vw;
bottom: .75vw;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 50%;
background-color: #f2f2f2;
}
.line__left {
background-color: #3d52c3;
}
.line__top {
background-color: #6e82ed;
}
.line__bottom {
background-color: #3d52c3;
}
.bar {
width: 29vw;
height: 1vw;
position: absolute;
top: 0;
left: -.5vw;
-webkit-transform: translateZ(16.5vw);
transform: translateZ(16.5vw);
}
.bar__front {
width: 29vw;
height: 0.5vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(1.5vw);
transform: rotateX(-90deg) translateZ(1.5vw);
}
.bar__back {
width: 29vw;
height: 0.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-29vw) translateY(-0.5vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-29vw) translateY(-0.5vw);
}
.bar__right {
width: 2vw;
height: 0.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(29vw) translateX(-2vw) translateY(-0.5vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(29vw) translateX(-2vw) translateY(-0.5vw);
}
.bar__left {
width: 2vw;
height: 0.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
.bar__top {
width: 29vw;
height: 2vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(0.5vw);
transform: translateZ(0.5vw);
}
.bar__bottom {
width: 29vw;
height: 2vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-29vw);
transform: rotateY(180deg) translateX(-29vw);
}
.bar__front {
background-color: #5669d5;
}
.bar__back {
background-color: #3d52c3;
}
.bar__right {
background-color: #3d52c3;
}
.bar__left {
background-color: #6e82ed;
}
.bar__top {
background-color: #6e82ed;
}
.bar__bottom {
background-color: #3d52c3;
}
/******************/
.base {
width: 26vw;
height: 4vw;
position: absolute;
top: .5vw;
left: 1vw;
}
.base__front {
width: 26vw;
height: 0.75vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(7.25vw);
transform: rotateX(-90deg) translateZ(7.25vw);
}
.base__back {
width: 26vw;
height: 0.75vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-26vw) translateY(-0.75vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-26vw) translateY(-0.75vw);
}
.base__right {
width: 8vw;
height: 0.75vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(26vw) translateX(-8vw) translateY(-0.75vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(26vw) translateX(-8vw) translateY(-0.75vw);
}
.base__left {
width: 8vw;
height: 0.75vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
}
.base__top {
width: 26vw;
height: 8vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(0.75vw);
transform: translateZ(0.75vw);
}
.base__bottom {
width: 26vw;
height: 8vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-26vw);
transform: rotateY(180deg) translateX(-26vw);
}
.base__front {
background-image: -webkit-gradient(linear, left top, right top, from(#16d2c8), to(#11a097));
background-image: linear-gradient(to right, #16d2c8, #11a097);
}
.base__back {
background-color: #1fa595;
}
.base__right {
background-color: #1fa595;
}
.base__left {
background-color: #1fa595;
}
.base__top {
background-color: #1fa595;
}
.base__bottom {
background-color: #1fa595;
}
.bb {
width: 28vw;
height: 1vw;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateZ(1vw);
transform: translateZ(1vw);
}
.bb__front {
width: 28vw;
height: 12vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(-10vw);
transform: rotateX(-90deg) translateZ(-10vw);
}
.bb__back {
width: 28vw;
height: 12vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-28vw) translateY(-12vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-28vw) translateY(-12vw);
}
.bb__right {
width: 2vw;
height: 12vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(28vw) translateX(-2vw) translateY(-12vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(28vw) translateX(-2vw) translateY(-12vw);
}
.bb__left {
width: 2vw;
height: 12vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-12vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-12vw);
}
.bb__top {
width: 28vw;
height: 2vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(12vw);
transform: translateZ(12vw);
}
.bb__bottom {
width: 28vw;
height: 2vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-28vw);
transform: rotateY(180deg) translateX(-28vw);
}
.bb__front {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2.8vw, #00DBCD), color-stop(3.4vw, #119b93));
background-image: linear-gradient(to bottom, #00DBCD 2.8vw, #119b93 3.4vw);
}
.bb__back {
background-color: #23BAA8;
}
.bb__right {
background-image: -webkit-gradient(linear, left top, left bottom, from(#23BAA8), to(#12a9a0));
background-image: linear-gradient(to bottom, #23BAA8, #12a9a0);
}
.bb__left {
background-color: #00FFF0;
}
.bb__top {
background-image: -webkit-gradient(linear, left top, right top, from(#99fff9), to(#00FFF0));
background-image: linear-gradient(to right, #99fff9, #00FFF0);
}
.bb__bottom {
background-color: #23BAA8;
}
.bf {
width: 27.5vw;
height: 3.5vw;
position: absolute;
top: 2vw;
left: .25vw;
-webkit-transform: translateZ(1vw);
transform: translateZ(1vw);
}
.bf__front {
width: 27.5vw;
height: 9vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(-2vw);
transform: rotateX(-90deg) translateZ(-2vw);
}
.bf__back {
width: 27.5vw;
height: 9vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-27.5vw) translateY(-9vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-27.5vw) translateY(-9vw);
}
.bf__right {
width: 7vw;
height: 9vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(27.5vw) translateX(-7vw) translateY(-9vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(27.5vw) translateX(-7vw) translateY(-9vw);
}
.bf__left {
width: 7vw;
height: 9vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-9vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-9vw);
}
.bf__top {
width: 27.5vw;
height: 7vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(9vw);
transform: translateZ(9vw);
}
.bf__bottom {
width: 27.5vw;
height: 7vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-27.5vw);
transform: rotateY(180deg) translateX(-27.5vw);
}
.bf__front {
background-color: #00DBCD;
}
.bf__back {
background-color: #23BAA8;
}
.bf__right {
background-image: -webkit-gradient(linear, left top, left bottom, from(#23BAA8), to(#12a9a0));
background-image: linear-gradient(to bottom, #23BAA8, #12a9a0);
}
.bf__left {
background-color: #00FFF0;
}
.bf__top {
background-image: -webkit-gradient(linear, left top, right top, from(#99fff9), to(#00FFF0));
background-image: linear-gradient(to right, #99fff9, #00FFF0);
}
.bf__bottom {
background-color: #23BAA8;
}
/****************/
/****************/
.screen {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
position: absolute;
top: .5vw;
left: .5vw;
width: 27vw;
height: 2vw;
overflow: hidden;
box-shadow: inset 0.15vw -0.25vw 0.1vw #00FFF0, inset -0.15vw 0.15vw 0.1vw #00c2b5;
background-color: rgba(0, 219, 205, 0.5);
}
.screen::before {
content: '';
position: absolute;
width: 90%;
height: .2vw;
background-color: #f2f2f2;
box-shadow: 0.05vw 0.05vw 0.075vw #00a89d, -0.05vw -0.05vw 0.075vw #00a89d, -0.05vw 0.05vw 0.075vw #00a89d, 0.05vw -0.05vw 0.075vw #00a89d;
}
.screen::after {
content: '';
position: absolute;
width: .2vw;
height: 1vw;
background-color: #5a6dd6;
box-shadow: 0.05vw 0.05vw 0.075vw #00a89d, -0.05vw -0.05vw 0.075vw #00a89d, -0.05vw 0.05vw 0.075vw #00a89d, 0.05vw -0.05vw 0.075vw #00a89d;
-webkit-animation: indicator 8s infinite alternate;
animation: indicator 8s infinite alternate;
}
.shadow {
position: absolute;
width: 120%;
height: 200%;
bottom: 0;
left: 0;
overflow: hidden;
}
.shadow::before, .shadow::after {
content: '';
position: absolute;
width: 28vw;
height: 100%;
bottom: 0;
left: 0;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: skewX(-15deg);
transform: skewX(-15deg);
background-image: -webkit-gradient(linear, left top, right top, from(#be4e67), to(#b1415a));
background-image: linear-gradient(to right, #be4e67, #b1415a);
}
.shadow::after {
height: 100%;
bottom: 0;
left: 9%;
-webkit-transform: skewX(-15deg) skewY(8deg);
transform: skewX(-15deg) skewY(8deg);
}
.keys {
display: -webkit-box;
display: flex;
position: absolute;
height: 1.1vw;
bottom: 1vw;
background-color: #23BAA8;
}
.keys::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 120%;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: skewX(-10deg);
transform: skewX(-10deg);
background-color: #23BAA8;
-webkit-animation: key-shadow 3s infinite;
animation: key-shadow 3s infinite;
}
.keys--1 {
left: 50%;
-webkit-transform: translateZ(10vw) translateX(-50%);
transform: translateZ(10vw) translateX(-50%);
}
.keys--2 {
left: 2vw;
-webkit-transform: translateZ(10vw);
transform: translateZ(10vw);
}
.keys--3 {
right: 2vw;
-webkit-transform: translateZ(10vw);
transform: translateZ(10vw);
}
.key {
width: 1.25vw;
height: 0.5vw;
margin: 0 .125vw;
}
.key__front {
width: 1.25vw;
height: 0.75vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(0.25vw);
transform: rotateX(-90deg) translateZ(0.25vw);
}
.key__back {
width: 1.25vw;
height: 0.75vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.75vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.75vw);
}
.key__right {
width: 1vw;
height: 0.75vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.75vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.75vw);
}
.key__left {
width: 1vw;
height: 0.75vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
}
.key__top {
width: 1.25vw;
height: 1vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(0.75vw);
transform: translateZ(0.75vw);
}
.key__bottom {
width: 1.25vw;
height: 1vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-1.25vw);
transform: rotateY(180deg) translateX(-1.25vw);
}
.key__front {
background-color: #dddddd;
}
.key__back {
background-color: #b3b3b3;
}
.key__right {
background-color: #b3b3b3;
}
.key__left {
background-color: #f2f2f2;
}
.key__top {
background-color: #f2f2f2;
}
.key__bottom {
background-color: #b3b3b3;
}
.key:nth-of-type(2) .key__top {
-webkit-animation: key 1s infinite;
animation: key 1s infinite;
}
.key--cta .key__front {
background-color: #d6c35a;
-webkit-animation: grow-front-key 5s infinite ease;
animation: grow-front-key 5s infinite ease;
}
@-webkit-keyframes grow-front-key {
0%, 15%, 45%, 60%, 62%, 68% {
width: 1.25vw;
height: 0.75vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(0.25vw);
transform: rotateX(-90deg) translateZ(0.25vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 1.25vw;
height: 0.5vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(0.5vw);
transform: rotateX(-90deg) translateZ(0.5vw);
}
}
@keyframes grow-front-key {
0%, 15%, 45%, 60%, 62%, 68% {
width: 1.25vw;
height: 0.75vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(0.25vw);
transform: rotateX(-90deg) translateZ(0.25vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 1.25vw;
height: 0.5vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(0.5vw);
transform: rotateX(-90deg) translateZ(0.5vw);
}
}
.key--cta .key__back {
background-color: #bba83a;
-webkit-animation: grow-back-key 5s infinite ease;
animation: grow-back-key 5s infinite ease;
}
@-webkit-keyframes grow-back-key {
0%, 15%, 45%, 60%, 62%, 68% {
width: 1.25vw;
height: 0.75vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.75vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.75vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 1.25vw;
height: 0.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.5vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.5vw);
}
}
@keyframes grow-back-key {
0%, 15%, 45%, 60%, 62%, 68% {
width: 1.25vw;
height: 0.75vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.75vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.75vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 1.25vw;
height: 0.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.5vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.5vw);
}
}
.key--cta .key__right {
background-color: #bba83a;
-webkit-animation: grow-right-key 5s infinite ease;
animation: grow-right-key 5s infinite ease;
}
@-webkit-keyframes grow-right-key {
0%, 15%, 45%, 60%, 62%, 68% {
width: 1vw;
height: 0.75vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.75vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.75vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 1vw;
height: 0.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.5vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.5vw);
}
}
@keyframes grow-right-key {
0%, 15%, 45%, 60%, 62%, 68% {
width: 1vw;
height: 0.75vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.75vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.75vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 1vw;
height: 0.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.5vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.5vw);
}
}
.key--cta .key__left {
background-color: #EEDB73;
-webkit-animation: grow-left-key 5s infinite ease;
animation: grow-left-key 5s infinite ease;
}
@-webkit-keyframes grow-left-key {
0%, 15%, 45%, 60%, 62%, 68% {
width: 1vw;
height: 0.75vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 1vw;
height: 0.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
}
@keyframes grow-left-key {
0%, 15%, 45%, 60%, 62%, 68% {
width: 1vw;
height: 0.75vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 1vw;
height: 0.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
}
.key--cta .key__top {
background-color: #EEDB73;
-webkit-animation: grow-top-key 5s infinite ease;
animation: grow-top-key 5s infinite ease;
}
@-webkit-keyframes grow-top-key {
0%, 15%, 45%, 60%, 62%, 68% {
width: 1.25vw;
height: 1vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(0.75vw);
transform: translateZ(0.75vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 1.25vw;
height: 1vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(0.5vw);
transform: translateZ(0.5vw);
}
}
@keyframes grow-top-key {
0%, 15%, 45%, 60%, 62%, 68% {
width: 1.25vw;
height: 1vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(0.75vw);
transform: translateZ(0.75vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 1.25vw;
height: 1vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(0.5vw);
transform: translateZ(0.5vw);
}
}
.key--cta .key__bottom {
background-color: #bba83a;
}
.key--cta:nth-of-type(2) .key__front {
-webkit-animation: grow-front-key 3s infinite ease;
animation: grow-front-key 3s infinite ease;
}
@keyframes grow-front-key {
0%, 15%, 45%, 60%, 62%, 68% {
width: 1.25vw;
height: 0.75vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(0.25vw);
transform: rotateX(-90deg) translateZ(0.25vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 1.25vw;
height: 0.5vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(0.5vw);
transform: rotateX(-90deg) translateZ(0.5vw);
}
}
.key--cta:nth-of-type(2) .key__back {
-webkit-animation: grow-back-key 3s infinite ease;
animation: grow-back-key 3s infinite ease;
}
@keyframes grow-back-key {
0%, 15%, 45%, 60%, 62%, 68% {
width: 1.25vw;
height: 0.75vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.75vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.75vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 1.25vw;
height: 0.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.5vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.5vw);
}
}
.key--cta:nth-of-type(2) .key__right {
-webkit-animation: grow-right-key 3s infinite ease;
animation: grow-right-key 3s infinite ease;
}
@keyframes grow-right-key {
0%, 15%, 45%, 60%, 62%, 68% {
width: 1vw;
height: 0.75vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.75vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.75vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 1vw;
height: 0.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.5vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.5vw);
}
}
.key--cta:nth-of-type(2) .key__left {
-webkit-animation: grow-left-key 3s infinite ease;
animation: grow-left-key 3s infinite ease;
}
@keyframes grow-left-key {
0%, 15%, 45%, 60%, 62%, 68% {
width: 1vw;
height: 0.75vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 1vw;
height: 0.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
}
.key--cta:nth-of-type(2) .key__top {
-webkit-animation: grow-top-key 3s infinite ease;
animation: grow-top-key 3s infinite ease;
}
@keyframes grow-top-key {
0%, 15%, 45%, 60%, 62%, 68% {
width: 1.25vw;
height: 1vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(0.75vw);
transform: translateZ(0.75vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 1.25vw;
height: 1vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(0.5vw);
transform: translateZ(0.5vw);
}
}
.key--cta2 {
-webkit-transform: scaleZ(0.5);
transform: scaleZ(0.5);
}
.key--cta2 .key__front {
background-color: #5a6dd6;
}
.key--cta2 .key__back {
background-color: #4155c4;
}
.key--cta2 .key__right {
background-color: #4155c4;
}
.key--cta2 .key__left {
background-color: #7386ee;
}
.key--cta2 .key__top {
background-color: #7386ee;
}
.key--cta2 .key__bottom {
background-color: #4155c4;
}
.speakers {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.speaker {
position: absolute;
top: 1.5vw;
}
.speaker__front {
width: 6vw;
height: 0.6vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(5.4vw);
transform: rotateX(-90deg) translateZ(5.4vw);
}
.speaker__back {
width: 6vw;
height: 0.6vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-0.6vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-0.6vw);
}
.speaker__right {
width: 6vw;
height: 0.6vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-0.6vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-0.6vw);
}
.speaker__left {
width: 6vw;
height: 0.6vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.6vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.6vw);
}
.speaker__top {
width: 6vw;
height: 6vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(0.6vw);
transform: translateZ(0.6vw);
}
.speaker__bottom {
width: 6vw;
height: 6vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-6vw);
transform: rotateY(180deg) translateX(-6vw);
}
.speaker::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6.35vw;
height: 6.65vw;
background-color: rgba(35, 186, 168, 0.5);
-webkit-animation: speaker-shadow 1s infinite;
animation: speaker-shadow 1s infinite;
}
.speaker--1 {
left: calc(100% - 8vw);
}
.speaker--2 {
right: calc(100% - 2vw);
}
.speaker__front {
background-color: #b3b3b3;
}
.speaker__back {
background-color: #f2f2f2;
}
.speaker__right {
background-color: #b3b3b3;
}
.speaker__left {
background-color: #f2f2f2;
}
.speaker__top {
background-image: -webkit-gradient(linear, left top, right top, from(#eaeaea), to(#dddddd));
background-image: linear-gradient(to right, #eaeaea, #dddddd);
}
.speaker__bottom {
background-color: #b3b3b3;
}
.sfa {
-webkit-animation: grow-front-speaker 1s infinite ease;
animation: grow-front-speaker 1s infinite ease;
}
@-webkit-keyframes grow-front-speaker {
0%, 15%, 45%, 60%, 62%, 68% {
width: 6vw;
height: 0.6vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(5.4vw);
transform: rotateX(-90deg) translateZ(5.4vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 6vw;
height: 1vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(5vw);
transform: rotateX(-90deg) translateZ(5vw);
}
}
@keyframes grow-front-speaker {
0%, 15%, 45%, 60%, 62%, 68% {
width: 6vw;
height: 0.6vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(5.4vw);
transform: rotateX(-90deg) translateZ(5.4vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 6vw;
height: 1vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(5vw);
transform: rotateX(-90deg) translateZ(5vw);
}
}
.sba {
-webkit-animation: grow-back-speaker 1s infinite ease;
animation: grow-back-speaker 1s infinite ease;
}
@-webkit-keyframes grow-back-speaker {
0%, 15%, 45%, 60%, 62%, 68% {
width: 6vw;
height: 0.6vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-0.6vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-0.6vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 6vw;
height: 1vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-1vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-1vw);
}
}
@keyframes grow-back-speaker {
0%, 15%, 45%, 60%, 62%, 68% {
width: 6vw;
height: 0.6vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-0.6vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-0.6vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 6vw;
height: 1vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-1vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-1vw);
}
}
.sra {
-webkit-animation: grow-right-speaker 1s infinite ease;
animation: grow-right-speaker 1s infinite ease;
}
@-webkit-keyframes grow-right-speaker {
0%, 15%, 45%, 60%, 62%, 68% {
width: 6vw;
height: 0.6vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-0.6vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-0.6vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 6vw;
height: 1vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-1vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-1vw);
}
}
@keyframes grow-right-speaker {
0%, 15%, 45%, 60%, 62%, 68% {
width: 6vw;
height: 0.6vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-0.6vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-0.6vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 6vw;
height: 1vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-1vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-1vw);
}
}
.sla {
-webkit-animation: grow-left-speaker 1s infinite ease;
animation: grow-left-speaker 1s infinite ease;
}
@-webkit-keyframes grow-left-speaker {
0%, 15%, 45%, 60%, 62%, 68% {
width: 6vw;
height: 0.6vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.6vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.6vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 6vw;
height: 1vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw);
}
}
@keyframes grow-left-speaker {
0%, 15%, 45%, 60%, 62%, 68% {
width: 6vw;
height: 0.6vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.6vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.6vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 6vw;
height: 1vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw);
}
}
.sta {
-webkit-animation: grow-top-speaker 1s infinite ease;
animation: grow-top-speaker 1s infinite ease;
}
@-webkit-keyframes grow-top-speaker {
0%, 15%, 45%, 60%, 62%, 68% {
width: 6vw;
height: 6vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(0.6vw);
transform: translateZ(0.6vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 6vw;
height: 6vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(1vw);
transform: translateZ(1vw);
}
}
@keyframes grow-top-speaker {
0%, 15%, 45%, 60%, 62%, 68% {
width: 6vw;
height: 6vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(0.6vw);
transform: translateZ(0.6vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
width: 6vw;
height: 6vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(1vw);
transform: translateZ(1vw);
}
}
.controls {
display: -webkit-box;
display: flex;
position: absolute;
top: 2vw;
width: 5vw;
height: 2.5vw;
-webkit-transform: translateZ(10vw);
transform: translateZ(10vw);
}
.controls:nth-of-type(1) {
left: 2vw;
}
.controls:nth-of-type(2) {
right: 1vw;
}
.controls:nth-of-type(3) {
left: 45%;
}
.control {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
width: .35vw;
height: 2.25vw;
margin: 0 .3vw;
background-color: rgba(35, 186, 168, 0.35);
border-radius: 1vw;
}
.control__front {
width: 0.5vw;
height: 0.25vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(0.25vw);
transform: rotateX(-90deg) translateZ(0.25vw);
}
.control__back {
width: 0.5vw;
height: 0.25vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-0.25vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-0.25vw);
}
.control__right {
width: 0.5vw;
height: 0.25vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-0.5vw) translateY(-0.25vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-0.5vw) translateY(-0.25vw);
}
.control__left {
width: 0.5vw;
height: 0.25vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.25vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.25vw);
}
.control__top {
width: 0.5vw;
height: 0.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(0.25vw);
transform: translateZ(0.25vw);
}
.control__bottom {
width: 0.5vw;
height: 0.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-0.5vw);
transform: rotateY(180deg) translateX(-0.5vw);
}
.control::before {
content: '';
position: absolute;
width: .6vw;
height: .6vw;
background-color: #23BAA8;
box-shadow: inset 0.15vw -0.25vw 0.1vw #00FFF0, inset -0.15vw 0.15vw 0.1vw #00c2b5;
background-color: rgba(0, 219, 205, 0.5);
}
.control__front {
background-color: #d6c35a;
}
.control__back {
background-color: #bba83a;
}
.control__right {
background-color: #bba83a;
}
.control__left {
background-color: #EEDB73;
}
.control__top {
background-color: #EEDB73;
}
.control__bottom {
background-color: #bba83a;
}
.control--cta {
-webkit-box-align: center;
align-items: center;
}
.control--cta .control__front {
background-color: #dddddd;
}
.control--cta .control__back {
background-color: #b3b3b3;
}
.control--cta .control__right {
background-color: #b3b3b3;
}
.control--cta .control__left {
background-color: #f2f2f2;
}
.control--cta .control__top {
background-color: #f2f2f2;
}
.control--cta .control__bottom {
background-color: #b3b3b3;
}
.control--ct2 .control__front {
background-color: #5a6dd6;
}
.control--ct2 .control__back {
background-color: #4155c4;
}
.control--ct2 .control__right {
background-color: #4155c4;
}
.control--ct2 .control__left {
background-color: #7386ee;
}
.control--ct2 .control__top {
background-color: #7386ee;
}
.control--ct2 .control__bottom {
background-color: #4155c4;
}
.cas {
position: absolute;
top: 1.5vw;
left: 10vw;
}
.cas__front {
width: 7vw;
height: 0.5vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(4vw);
transform: rotateX(-90deg) translateZ(4vw);
}
.cas__back {
width: 7vw;
height: 0.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-7vw) translateY(-0.5vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-7vw) translateY(-0.5vw);
}
.cas__right {
width: 4.5vw;
height: 0.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(7vw) translateX(-4.5vw) translateY(-0.5vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(7vw) translateX(-4.5vw) translateY(-0.5vw);
}
.cas__left {
width: 4.5vw;
height: 0.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
.cas__top {
width: 7vw;
height: 4.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(0.5vw);
transform: translateZ(0.5vw);
}
.cas__bottom {
width: 7vw;
height: 4.5vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-7vw);
transform: rotateY(180deg) translateX(-7vw);
}
.cas::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 7.25vw;
height: 5vw;
background-color: rgba(35, 186, 168, 0.5);
}
.cas__front {
background-color: #b3b3b3;
}
.cas__back {
background-color: #f2f2f2;
}
.cas__right {
background-color: #b3b3b3;
}
.cas__left {
background-color: #f2f2f2;
}
.cas__top {
background-color: #dddddd;
}
.cas__bottom {
background-color: #b3b3b3;
}
.cass {
position: absolute;
width: 80%;
height: 70%;
left: 10%;
top: 10%;
border: 0.75vw solid #4155c4;
}
.cass::before, .cass::after {
content: '';
position: absolute;
height: 1vw;
width: 1vw;
top: .35vw;
left: .35vw;
background-color: #4155c4;
border-radius: 50%;
}
.cass::after {
left: calc(100% - 1.5vw);
}
.buttons {
display: -webkit-box;
display: flex;
position: absolute;
bottom: 1.5vw;
left: 10vw;
width: 7vw;
height: 1vw;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.buttons::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 7.25vw;
height: 1.9vw;
background-color: rgba(35, 186, 168, 0.5);
}
.button {
width: 1.25vw;
height: 0.5vw;
margin: 0 .125vw;
}
.button__front {
width: 1.25vw;
height: 0.75vw;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX(-90deg) translateZ(0.25vw);
transform: rotateX(-90deg) translateZ(0.25vw);
}
.button__back {
width: 1.25vw;
height: 0.75vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.75vw);
transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.75vw);
}
.button__right {
width: 1vw;
height: 0.75vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.75vw);
transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.75vw);
}
.button__left {
width: 1vw;
height: 0.75vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
}
.button__top {
width: 1.25vw;
height: 1vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: translateZ(0.75vw);
transform: translateZ(0.75vw);
}
.button__bottom {
width: 1.25vw;
height: 1vw;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotateY(180deg) translateX(-1.25vw);
transform: rotateY(180deg) translateX(-1.25vw);
}
.button:nth-of-type(1) {
-webkit-animation: key-down-white 0.5s infinite alternate 0.0666666667s;
animation: key-down-white 0.5s infinite alternate 0.0666666667s;
}
.button:nth-of-type(2) {
-webkit-animation: key-down-white 0.5s infinite alternate 0.1333333333s;
animation: key-down-white 0.5s infinite alternate 0.1333333333s;
}
.button:nth-of-type(3) {
-webkit-animation: key-down-white 0.5s infinite alternate 0.2s;
animation: key-down-white 0.5s infinite alternate 0.2s;
}
.button:nth-of-type(4) {
-webkit-animation: key-down-white 0.5s infinite alternate 0.2666666667s;
animation: key-down-white 0.5s infinite alternate 0.2666666667s;
}
.button:nth-of-type(5) {
-webkit-animation: key-down-white 0.5s infinite alternate 0.3333333333s;
animation: key-down-white 0.5s infinite alternate 0.3333333333s;
}
.button:nth-of-type(6) {
-webkit-animation: key-down-white 0.5s infinite alternate 0.4s;
animation: key-down-white 0.5s infinite alternate 0.4s;
}
.button:nth-of-type(7) {
-webkit-animation: key-down-white 0.5s infinite alternate 0.4666666667s;
animation: key-down-white 0.5s infinite alternate 0.4666666667s;
}
.button:nth-of-type(8) {
-webkit-animation: key-down-white 0.5s infinite alternate 0.5333333333s;
animation: key-down-white 0.5s infinite alternate 0.5333333333s;
}
.button:nth-of-type(9) {
-webkit-animation: key-down-white 0.5s infinite alternate 0.6s;
animation: key-down-white 0.5s infinite alternate 0.6s;
}
.button:nth-of-type(10) {
-webkit-animation: key-down-white 0.5s infinite alternate 0.6666666667s;
animation: key-down-white 0.5s infinite alternate 0.6666666667s;
}
.button:nth-of-type(11) {
-webkit-animation: key-down-white 0.5s infinite alternate 0.7333333333s;
animation: key-down-white 0.5s infinite alternate 0.7333333333s;
}
.button:nth-of-type(12) {
-webkit-animation: key-down-white 0.5s infinite alternate 0.8s;
animation: key-down-white 0.5s infinite alternate 0.8s;
}
.button:nth-of-type(13) {
-webkit-animation: key-down-white 0.5s infinite alternate 0.8666666667s;
animation: key-down-white 0.5s infinite alternate 0.8666666667s;
}
.button:nth-of-type(14) {
-webkit-animation: key-down-white 0.5s infinite alternate 0.9333333333s;
animation: key-down-white 0.5s infinite alternate 0.9333333333s;
}
.button:nth-of-type(15) {
-webkit-animation: key-down-white 0.5s infinite alternate 1s;
animation: key-down-white 0.5s infinite alternate 1s;
}
.button:nth-of-type(16) {
-webkit-animation: key-down-white 0.5s infinite alternate 1.0666666667s;
animation: key-down-white 0.5s infinite alternate 1.0666666667s;
}
.button:nth-of-type(17) {
-webkit-animation: key-down-white 0.5s infinite alternate 1.1333333333s;
animation: key-down-white 0.5s infinite alternate 1.1333333333s;
}
.button:nth-of-type(18) {
-webkit-animation: key-down-white 0.5s infinite alternate 1.2s;
animation: key-down-white 0.5s infinite alternate 1.2s;
}
.button:nth-of-type(19) {
-webkit-animation: key-down-white 0.5s infinite alternate 1.2666666667s;
animation: key-down-white 0.5s infinite alternate 1.2666666667s;
}
.button:nth-of-type(20) {
-webkit-animation: key-down-white 0.5s infinite alternate 1.3333333333s;
animation: key-down-white 0.5s infinite alternate 1.3333333333s;
}
.button:nth-of-type(21) {
-webkit-animation: key-down-white 0.5s infinite alternate 1.4s;
animation: key-down-white 0.5s infinite alternate 1.4s;
}
.button__front {
background-color: #b3b3b3;
}
.button__back {
background-color: #f2f2f2;
}
.button__right {
background-color: #b3b3b3;
}
.button__left {
background-color: #f2f2f2;
}
.button__top {
background-image: -webkit-gradient(linear, left top, right top, from(#e2e2e2), to(#dddddd));
background-image: linear-gradient(to right, #e2e2e2, #dddddd);
}
.button__bottom {
background-color: #b3b3b3;
}
/*******************/
/*******************/
@-webkit-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 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;
}
}
@-webkit-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 key-shadow {
0%, 25%, 45%, 60%, 62%, 68%, 92%, 100% {
width: 100%;
height: 120%;
}
30%, 40%, 58%, 64%, 70%, 90% {
width: 100%;
height: 110%;
}
}
@-webkit-keyframes indicator {
0%, 10%, 70% {
-webkit-transform: translateX(-4vw);
transform: translateX(-4vw);
}
20%, 30%, 80%, 90%, 100% {
-webkit-transform: translateX(0vw);
transform: translateX(0vw);
}
25%, 60%, 95% {
-webkit-transform: translateX(-1vw);
transform: translateX(-1vw);
}
35%, 50% {
-webkit-transform: translateX(2vw);
transform: translateX(2vw);
}
38%, 45%, 52% {
-webkit-transform: translateX(4vw);
transform: translateX(4vw);
}
}
@keyframes indicator {
0%, 10%, 70% {
-webkit-transform: translateX(-4vw);
transform: translateX(-4vw);
}
20%, 30%, 80%, 90%, 100% {
-webkit-transform: translateX(0vw);
transform: translateX(0vw);
}
25%, 60%, 95% {
-webkit-transform: translateX(-1vw);
transform: translateX(-1vw);
}
35%, 50% {
-webkit-transform: translateX(2vw);
transform: translateX(2vw);
}
38%, 45%, 52% {
-webkit-transform: translateX(4vw);
transform: translateX(4vw);
}
}
@-webkit-keyframes key {
0%, 20% {
background-color: #EEDB73;
}
100% {
background-color: #f6edb7;
}
}
@keyframes key {
0%, 20% {
background-color: #EEDB73;
}
100% {
background-color: #f6edb7;
}
}
@-webkit-keyframes key-down-white {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform-origin: center;
transform-origin: center;
}
30%, 100% {
-webkit-transform: translateY(0.25vw);
transform: translateY(0.25vw);
-webkit-transform-origin: center;
transform-origin: center;
}
}
@keyframes key-down-white {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform-origin: center;
transform-origin: center;
}
30%, 100% {
-webkit-transform: translateY(0.25vw);
transform: translateY(0.25vw);
-webkit-transform-origin: center;
transform-origin: center;
}
}
@-webkit-keyframes radio-a {
0%, 15%, 45%, 60%, 62%, 68% {
-webkit-transform: perspective(10000px) rotateX(55deg) rotateZ(33deg) scale(0.8) translateZ(-9vw);
transform: perspective(10000px) rotateX(55deg) rotateZ(33deg) scale(0.8) translateZ(-9vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
-webkit-transform: perspective(10000px) rotateX(53deg) rotateZ(33deg) scale(0.8) translateZ(-9vw);
transform: perspective(10000px) rotateX(53deg) rotateZ(33deg) scale(0.8) translateZ(-9vw);
}
}
@keyframes radio-a {
0%, 15%, 45%, 60%, 62%, 68% {
-webkit-transform: perspective(10000px) rotateX(55deg) rotateZ(33deg) scale(0.8) translateZ(-9vw);
transform: perspective(10000px) rotateX(55deg) rotateZ(33deg) scale(0.8) translateZ(-9vw);
}
20%, 40%, 58%, 64%, 70%, 100% {
-webkit-transform: perspective(10000px) rotateX(53deg) rotateZ(33deg) scale(0.8) translateZ(-9vw);
transform: perspective(10000px) rotateX(53deg) rotateZ(33deg) scale(0.8) translateZ(-9vw);
}
}
view raw style.css hosted with ❤ by GitHub

Tags:
codewithninju

You may also like:

1 comment:

  1. blogger_logo_round_35
    Asif Ali14 September 2020 at 09:00

    Great Work Broo

    Really I admire your hardwork because writing the 1800 lines of CSS is not a small thing....

    ReplyDelete

Subscribe to: Post Comments (Atom)
(C) Copyright 2020 CodeWithNinju, All rights reserved.