Skip to content

Instantly share code, notes, and snippets.

@madole

madole/CSS-Record-Player.markdown

Created February 4, 2015 11:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save madole/51cec73c2cfa8b6c1d59 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save madole/51cec73c2cfa8b6c1d59 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Record Player
Raw
index.html
<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>
Raw
script.coffee
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'
Raw
style.css
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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment