Skip to content

Instantly share code, notes, and snippets.

@zapkub
Created April 21, 2017 07:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zapkub/ab3fc2f98aed6d3b5ff01e54ad97d315 to your computer and use it in GitHub Desktop.
Save zapkub/ab3fc2f98aed6d3b5ff01e54ad97d315 to your computer and use it in GitHub Desktop.
.container {
background: black;
display: flex;
flex-direction: column;
position: relative;
height: 100vh;
align-items: center;
justify-content: center;
box-sizing: border-box;
color: #f5f6f8;
}
.active .selectedSong {
animation: blink 0.44s infinite;
}
.active .unselectedSong {
transform: scale(0.7);
opacity: 0.2;
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 0.0;
}
}
.songItem {
width: 100%;
font-family: 'Sukhumvit Set';
height: 120px;
border-top: 1px solid white;
border-bottom: 1px solid white;
text-align: center;
margin: 40px 0;
box-sizing: border-box;
display: block;
align-items: center;
justify-content: center;
font-weight: bold;
transition: cubic-bezier(0.165, 0.840, 0.440, 1.000) 500ms all, ease-in-out 0.44s opacity;
transform-origin: center center;
perspective: 1000px;
position: relative;
will-change: transform;
overflow: hidden;
z-index: 9;
/*background: -webkit-linear-gradient(#fff, #948f96);
background: -moz-linear-gradient(#fff, #948f96);
background: -o-linear-gradient(#fff, #948f96);
background: linear-gradient(#fff, #948f96);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;*/
}
.songText{
display:flex;
justify-content: center;
align-items: center;
}
.song3dwrap {
transform-style: preserve-3d;
height: 100px;
position: absolute;
width:100%;
transform: translate(-50%,-50%);
left:0;
z-index: 1;
top:50%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment