<object class="scroller"><span>S</span><span>C</span><span>O</span><span>P</span><span>R</span><span>I</span><span> </span><span>D</span><span>I</span><span> </span><span>P</span><span>I</span><span>Ù</span><span> </span></object>
/*personal scroller*/
.scroller {
width: 10rem;
height: 10rem;
position: absolute;
left:0;
right:0;
margin: auto;
text-align: center;
color: #fff;
border-radius: 50%;
font-size: 0.5rem;
--numero-lettere: 14;
-webkit-text-fill-color: var(--text-color);
backface-visibility: hidden;
}
.scroller:after {
content: "↓";
color: var(--text-color);
position: absolute;
display: flex;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
flex-direction: column;
align-content: center;
justify-content: center;
align-items: center;
font-size: 1rem;
font-weight: 100;
}
.scroller span {
--elem: 1;
--rotazione: calc((1turn / var(--numero-lettere)) * var(--elem, 1));
position: absolute;
width: calc(100% - 2rem);
height: calc(100% - 2rem);
top: 1rem;
left: 1rem;
transform: rotate(var(--rotazione));
transform-origin: center;
}
.scroller span:nth-child(2) {
--elem: 2;
}
.scroller span:nth-child(3) {
--elem: 3;
}
.scroller span:nth-child(4) {
--elem: 4;
}
.scroller span:nth-child(5) {
--elem: 5;
}
.scroller span:nth-child(6) {
--elem: 6;
}
.scroller span:nth-child(7) {
--elem: 7;
}
.scroller span:nth-child(8) {
--elem: 8;
}
.scroller span:nth-child(9) {
--elem: 9;
}
.scroller span:nth-child(10) {
--elem: 10;
}
.scroller span:nth-child(11) {
--elem: 11;
}
.scroller span:nth-child(12) {
--elem: 12;
}
.scroller span:nth-child(13) {
--elem: 13;
}
.scroller span:nth-child(14) {
--elem: 14;
}
.scroller {
animation: spin360 8s linear infinite;
}
.scroller:after {
animation: spin360 8s infinite linear reverse;
}
@keyframes spin360 {
100% {
transform: rotateZ(360deg);
}
}
/*extra*/
:root {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background:black;
font-family:sans-serif;
-text-color: #fff;
}
//nojs-here
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.