web design archive: spinning cd animation (updated)

i'm documenting this for personal reference, but feel free to reuse!

i wanted to show off my profile sound with something other than an embed youtube player, so i added this instead:

An example of a spinning image coded with HTML and CSS on SpaceHey display the album cover for Perfume's "Computer City".

here's the code i put in my profile blurb:

<style>
.np {
animation: rotation 15s infinite linear;
border-radius: 50%;
-webkit-mask-image: url(https://svgsilh.com/svg/98417.svg);
mask-image: url(https://svgsilh.com/svg/98417.svg);
-webkit-mask-size: 200px;
mask-size: 200px;
mask-mode: luminance;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}

@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
</style>
<img class="np" style="width: 200px; height: 200px; object-fit: cover;" src="your image url here"/>

update [july 13th, 2023]

made an even better version with a different svg file for the cd mask + added a disc player background!

Update animation output with a CD player image asset.

<style>
.cd-player-group {
position: relative;
align-content: center;
}

.cd-player {
position: relative;
}

.cd {
position: relative;
top: -270px;
animation: rotation 15s infinite linear;
-webkit-mask-image: url(https://www.svgrepo.com/show/31074/compact-disc.svg);
mask-image: url(https://www.svgrepo.com/show/31074/compact-disc.svg);
-webkit-mask-size: 220px;
mask-size: 220px;
mask-mode: alpha;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
transform-origin: center;
}

#cdContainer {
height: 300px;
overflow: hidden;
}

@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}

.warning {
border-style: solid;
border-color: #edccd4;
border-width: 2px;
padding-bottom: 10px;
width: 300px;
margin: 0 auto;

}
</style>
<div id="cdContainer" class="cd-player-group">
<img class="cd-player" style="width: 300px; height: 300px;" src="https://cdn.discordapp.com/attachments/857829167718072380/1128291718232555530/pink_cd_player_clipped.png"/>
<br>
<img class="cd" style="width: 230px; height: 230px; object-fit: cover;" src="your image url here"/>
</div>

keywords: spacehey, html, css

17 Kudos

Comments

Displaying 7 of 7 comments ( View all | Add Comment )

M0N0+C0CAIN3	1712472057 for me half of pciture iz covered how do i fix that ir lly wanna use thiz bc itz elly kewl:( Report Comment
cooked	1694921365 this is so cool!! tyyy Report Comment np! ^^ by Jasmine; 1694947542; Report
☆Okami☆	1690523982 is there a way to make it blue? it looks awesome!! :D Report Comment thank you! i only used a PNG for the background, so you'll have to download the disc player image, edit the colors yourself, then reupload it somewhere and link to that URL - sorry! by Jasmine; 1690543328; Report
Nixmeow	1690487948 THANK YOU ZOOOOO MUCH FOR THIZ!!! (✧ω✧) Report Comment you're welcome! by Jasmine; 1690543100; Report
nico nicotine	1690468331 haii, how do i put text above the spinning cd? like, when i write something its next to the cd T-T Report Comment hi! you need to put a line break after your text with the <br> tag by Jasmine; 1690471508; Report tysm!! ill try l8r :3 by nico nicotine; 1690472507; Report
emo f★g	1690426698 This is like so kool I luv it sm Report Comment thank you! by Jasmine; 1690427897; Report
SAV!☆	1689048601 yo this is awesome!! Report Comment thank you!! by Jasmine; 1689048681; Report