Report Blog Entry
<!-- (c) Layout created by ¡! Madoka 🍥 (https://layouts.spacehey.com/layout?id=98493) -->
<style>
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.vinyl-container {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
}
.vinyl {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #111;
border: 10px solid #444;
position: absolute;
animation: rotate 5s infinite linear;
}
.center-hole {
width: 40px;
height: 40px;
background-color: #111;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.cover-container {
width: 80%;
height: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
border-radius: 50%;
}
.cover {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
animation: rotate 5s infinite linear;
}
.cover img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.cover-hole {
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
}
</style>
<div class="vinyl-container">
<div class="vinyl">
<div class="center-hole"></div>
</div>
<div class="cover-container">
<div class="cover">
<div class="cover-hole"></div>
<img src="your-cover.jpg" alt="Portada del disco"/>
</div>
</div>
</div>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )