HTML(Slim)
.center
.player
.album-cover
.image
.panel
.info
.title Old Town Road
.artist Lil Nas X feat. Billy Ray Cyrus
.controls
.playback
.backward
i.fas.fa-backward
.play
i.fas.fa-pause
.forward
i.fas.fa-forward
.repeat
i.fas.fa-redo-alt
.playlist
i.fas.fa-list-ul
.heart
i.fas.fa-heart
#expand-button
i.fas.fa-chevron-down.fa-2x
.timeline
.current-time 1:26
.line
.current
.total-time 2:37
CSS(SCSS)
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,800&display=swap');
$background-1: #FFDFDF;
$background-2: #DFDFFF;
$bar: #F0B67F;
$black: #60656F;
$red: #E87461;
body, html {
background: linear-gradient(135deg, $background-1, $background-2);
height: 100%;
color: $black;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Nunito Sans', sans-serif;
letter-spacing: 0.025rem;
}
.player {
overflow: hidden;
border-radius: 1rem;
width: 36rem;
box-shadow:
0 2rem 2rem -2rem rgba(black, 0.5),
0 1rem 4rem -1rem rgba(black, 0.2);
}
.album-cover {
position: absolute;
height: 8rem;
width: 8rem;
border-radius: 50%;
left: 1.5rem;
top: -3rem;
z-index: 2;
transition: all 400ms;
box-shadow:
0 2rem 2rem -2rem rgba(black, 0.5),
0 0rem 1.5rem 0 rgba(black, 0.2);
.image {
height: 100%;
width: 100%;
border-radius: 50%;
background-image: url('https://cdn-s3.allmusic.com/release-covers/500/0005/081/0005081250.jpg');
background-size: cover;
background-position: center;
animation: spin 2.5s linear infinite;
}
}
.panel {
position: relative;
height: 6.5rem;
box-sizing: border-box;
background: rgba(white, 0.6);
border-radius: 1rem;
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(white, black);
transition: all 400ms;
&:hover {
height: 9rem;
.line {
transform: scaley(2);
}
#expand-button {
opacity: 0.4;
transition: opacity 200ms 200ms;
&:hover {
opacity: 0.8;
}
}
}
}
.info {
position: absolute;
top: 1.5rem;
left: 10.5rem;
transition: all 400ms;
width: 12rem;
.title {
font-weight: 800;
font-size: 1.5rem;
margin-bottom: 0.25rem;
}
.artist {
font-size: 0.8rem;
}
}
.controls {
font-size: 1.25rem;
.playback {
position: absolute;
top: 1.2rem;
right: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 1.5rem;
width: 9rem;
transition: all 400ms;
}
div {
cursor: pointer;
transition: all 400ms;
}
.play {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
padding-left: 0rem;
box-sizing: border-box;
border-radius: 50%;
background: white;
&:after {
position: absolute;
content: '';
border-radius: 50%;
top: 0; right: 0; bottom: 0; left: 0;
box-shadow:
0 0.75rem 1rem -1rem rgba(black, 1),
0 0rem 1.5rem 0 rgba(black, 0.1);
opacity: 0.6;
transition: opacity 200ms;
}
&:hover:after {
opacity: 1;
}
}
.backward, .forward {
padding-top: 0.25rem;
}
.repeat, .playlist, .heart {
display: none;
position: absolute;
opacity: 0;
transition: all 400ms;
}
}
#expand-button {
opacity: 0;
position: absolute;
top: 5.5rem;
left: 16rem;
text-align: center;
width: 4rem;
transition: opacity 200ms 0ms;
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
.timeline {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.5rem;
transition: all 400ms;
.current-time, .total-time {
display: none;
position: absolute;
font-size: 0.8rem;
opacity: 0;
transition: all 400ms;
}
.line {
position: absolute;
bottom: 0;
left: 0;
background: rgba(black, 0.1);
height: 0.25rem;
width: 100%;
transform-origin: bottom center;
transition: transform 250ms ease-in-out;
cursor: pointer;
.current {
background: $bar;
width: 50%;
height: 100%;
}
}
}
@keyframes spin {
0% { transform: rotate(0deg) }
50% { transform: rotate(180deg) }
100% { transform: rotate(360deg) }
}
.player.expand {
width: 24rem;
transition: all 400ms;
.album-cover {
top: 8rem;
left: 8rem;
}
.panel {
flex-direction: column;
height: 36rem;
transition: all 400ms;
&:hover .line {
transform: scaley(1);
}
.info {
text-align: center;
left: 6rem;
top: 19rem;
}
.controls {
margin: 5rem 0 0;
width: 12rem;
.playback {
top: 27.5rem;
right: 7.5rem;
}
.repeat {
display: block;
left: 2rem;
bottom: 1.5rem;
opacity: 0.3;
&:hover {
opacity: 0.9;
}
}
.heart {
display: block;
right: 2rem;
bottom: 1.5rem;
opacity: 0.6;
&:hover {
opacity: 0.9;
color: $red;
}
}
.playlist {
display: block;
right: 2rem;
top: 1.5rem;
opacity: 0.6;
&:hover {
opacity: 0.9;
}
}
}
.timeline {
left: 4rem;
bottom: 11rem;
width: 16rem;
.line {
border-radius: 1rem;
.current {
border-radius: 1rem
}
}
.current-time {
display: block;
left: -2.2rem;
opacity: 0.8;
}
.total-time {
display: block;
right: -2.2rem;
opacity: 0.8;
}
}
#expand-button {
left: 10rem;
top: 1.5rem;
opacity: 0.3;
transform: scaley(-1);
&:hover {
opacity: 0.8;
}
}
}
}
Javascript
$('#expand-button').click(function() {
$('.player').toggleClass('expand')
})
وسلامتكم
0 تعليقات