Forked from Christy Wang's Pen CSS Record Player.
A Pen by Andrew McDowell on CodePen.
Forked from Christy Wang's Pen CSS Record Player.
A Pen by Andrew McDowell on CodePen.
<body> | |
<div class="container"> | |
<div class="board"> | |
<div class="vinyl"> | |
<div class="vinyl-inner1"> | |
<div class="vinyl-inner2"> | |
<div class="vinyl-inner3"> | |
<div class="vinyl-inner4"> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="speaker-left"> | |
</div> | |
<div class="speaker-right"> | |
</div> | |
<div class="tonearm"> | |
<div class="tonearmblock"></div> | |
</div> | |
<div class="adjuster"> | |
</div> | |
<div class="tonearmrest"> | |
<div class="tonearmrest2"> | |
</div> | |
</div> | |
</div> | |
</div> | |
</body> |
vinyl = $ '.vinyl' | |
leftSpeaker = $ '.speaker-left' | |
rightSpeaker = $ '.speaker-right' | |
leftSpeaker.on 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', -> | |
vinyl.addClass 'rotate' | |
leftSpeaker.addClass 'green' | |
rightSpeaker.removeClass 'red' | |
rightSpeaker.on 'mouseover', -> | |
vinyl.removeClass 'rotate' | |
leftSpeaker.removeClass 'green' | |
rightSpeaker.on 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', -> | |
rightSpeaker.addClass 'red' |
body{ | |
background-color:#d8d8d8 | |
} | |
.container{ | |
width:600px; | |
height:400px; | |
margin:50px auto; | |
} | |
.board{ | |
width:500px; | |
height:350px; | |
background:#9b7c5b; | |
border-radius:15px; | |
border:5px solid #e6b786; | |
box-shadow: 15px 15px 35px 15px darkgray; | |
} | |
.vinyl{ | |
background: radial-gradient(ellipse at center, #959595 0%,#0d0d0d 23%,#6b6b6b 25%,#070707 28%,#070707 34%,#606060 37%,#070707 39%,#010101 48%,#757575 50%,#0a0a0a 52%,#0a0a0a 56%,#777777 58%,#0a0a0a 61%,#050505 70%,#777777 72%,#0c0c0c 74%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); | |
border-radius:50%; | |
display:block; | |
position:absolute; | |
z-index:10; | |
width:300px; | |
height:300px; | |
margin-left:75px; | |
margin-top:25px; | |
box-shadow: 0px 0px 15px 0px gray; | |
} | |
.vinyl-inner1{ | |
position:absolute; | |
display:block; | |
z-index:20; | |
width:100px; | |
height:100px; | |
margin:100px; | |
border-radius:50%; | |
background:#313337 | |
} | |
.vinyl-inner2{ | |
position:absolute; | |
display:block; | |
z-index:30; | |
width:80px; | |
height:80px; | |
margin:10px; | |
border-radius:50%; | |
background:#371d21 | |
} | |
.vinyl-inner3{ | |
position:absolute; | |
display:block; | |
z-index:40; | |
width:20px; | |
height:20px; | |
margin:30px; | |
border-radius:50%; | |
background:black; | |
} | |
.vinyl-inner4{ | |
position:absolute; | |
display:block; | |
z-index:50; | |
width:10px; | |
height:10px; | |
margin:5px; | |
border-radius:50%; | |
background:white; | |
} | |
.speaker-left{ | |
position:absolute; | |
display:block; | |
z-index:30; | |
width:40px; | |
height:40px; | |
margin-top:260px; | |
margin-left:50px; | |
border-radius:50%; | |
background:black; | |
border:3px solid #6f6e6c; | |
} | |
.speaker-right{ | |
position:absolute; | |
display:block; | |
z-index:30; | |
width:40px; | |
height:40px; | |
margin-top:260px; | |
margin-left:350px; | |
border-radius:50%; | |
background:black; | |
border:3px solid #6f6e6c; | |
} | |
.tonearm{ | |
position:absolute; | |
display:block; | |
height:90px; | |
width:150px; | |
border-left:5px solid #6f6e6c; | |
border-bottom:5px solid #6f6e6c; | |
border-bottom-left-radius:90px 130%; | |
transform:rotate(270deg); | |
top: 158px; | |
margin-left:290px; | |
z-index:60 | |
} | |
.tonearmblock{ | |
display:block; | |
position:absolute; | |
width:40px; | |
height:15px; | |
z-index:70; | |
background:#6f6e6c; | |
left: -25px; | |
bottom: 70px; | |
transform:rotate(75deg) | |
} | |
.tonearmrest{ | |
display:block; | |
position:absolute; | |
width:34px; | |
height:50px; | |
border-radius:30%; | |
z-index:40; | |
background:#848380; | |
margin-left:395px; | |
margin-top:55px; | |
} | |
.tonearmrest2{ | |
z-index:55; | |
position:absolute; | |
display:block; | |
margin-left:8px; | |
margin-top:10px; | |
width:18px; | |
height:25px; | |
background:#6f6e6c; | |
} | |
.adjuster{ | |
display:block; | |
position:absolute; | |
width:95px; | |
height:75px; | |
z-index:5; | |
border-radius:5px; | |
background:#bcb9ae; | |
margin-left:350px; | |
margin-top:40px; | |
} | |
.speaker-right:hover + .tonearm{ | |
transform: rotate(240deg); | |
transform-origin: 110px; | |
transition-duration: 2s; | |
} | |
.speaker-right:hover { | |
transition-duration: 2s; | |
background-color: red; | |
} | |
.speaker-left:active { | |
transition-duration: 2s; | |
transition-timing-function: linear; | |
background-color: lime; | |
} | |
.vinyl:hover { | |
transition-duration: 10s; | |
transform: rotate(1080deg) | |
} | |
.vinyl-inner2::after { | |
content:''; | |
width: 1px; | |
height: 30px; | |
transform: rotate(125deg); | |
background-color: white; | |
position: absolute; | |
} | |
.green { | |
background-color: lime; | |
} | |
.red { | |
background-color: red; | |
} | |
.rotate { | |
-webkit-animation-name: spin; | |
-webkit-animation-duration: 4000ms; | |
-webkit-animation-iteration-count: infinite; | |
-webkit-animation-timing-function: linear; | |
-moz-animation-name: spin; | |
-moz-animation-duration: 4000ms; | |
-moz-animation-iteration-count: infinite; | |
-moz-animation-timing-function: linear; | |
-ms-animation-name: spin; | |
-ms-animation-duration: 4000ms; | |
-ms-animation-iteration-count: infinite; | |
-ms-animation-timing-function: linear; | |
animation-name: spin; | |
animation-duration: 4000ms; | |
animation-iteration-count: infinite; | |
animation-timing-function: linear; | |
} | |
@-ms-keyframes spin { | |
from { -ms-transform: rotate(0deg); } | |
to { -ms-transform: rotate(360deg); } | |
} | |
@-moz-keyframes spin { | |
from { -moz-transform: rotate(0deg); } | |
to { -moz-transform: rotate(360deg); } | |
} | |
@-webkit-keyframes spin { | |
from { -webkit-transform: rotate(0deg); } | |
to { -webkit-transform: rotate(360deg); } | |
} | |
@keyframes spin { | |
from { | |
transform:rotate(0deg); | |
} | |
to { | |
transform:rotate(360deg); | |
} | |
} |