Skip to content

Instantly share code, notes, and snippets.

@HerXayah
Last active April 14, 2022 17:19
Show Gist options
  • Save HerXayah/575b4e43d044b8be3ee6943e5ad05efd to your computer and use it in GitHub Desktop.
Save HerXayah/575b4e43d044b8be3ee6943e5ad05efd to your computer and use it in GitHub Desktop.
Now Playing Widget Animated Spotify OBS
/* used with https://spotify-widget.vercel.app/ */
@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed&display=swap');
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
* {
font-family: 'Asap Condensed', sans-serif;
}
.eUpjul {
background-color: rgba(0,0,0,0.73);
width: 0px;
overflow: hidden;
transition: all 2s;
-moz-transition: height 2s; /* Firefox 4 */
-webkit-transition: height 2s; /* Safari and Chrome */
-o-transition: height 2s; /* Opera */
animation: animation2 60s infinite;
}
.widget__artist-name {
font-size: 45px;
color: rgb(27, 143, 27);
font-weight: bold;
margin-top: -10px;
margin-bottom: -10px;
}
.widget__song-name {
font-size: 55px;
color: #fff;
font-weight: bold;
margin-top: -10px;
margin-bottom: -10px;
}
@keyframes animation2 {
0% {
width: 0px;
margin-left: 350px;
} 10% {
width: 400px;
margin-left: -100px;
} 70% {
width: 400px;
margin-left: -100px;
} 80% {
width: 0px;
margin-left: 350px;
} 100% {
width: 0px;
margin-left: 350px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment