-2.times do
%h1{"data-splitting" => "chars"} T A K E • I T • E A S Y •
View Compiled
html {
font-size: 1.5vmin;
}
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
perspective:40rem;
background: linear-gradient(to right, #d9a7c7, #fffcdc);
*{
transform-style:preserve-3d;
&:before, &:after{
transform-style:preserve-3d;
}
}
h1{
color:transparent;
position:absolute;
width:0px;
height:0px;
margin:0;
font-family:'Oswald';
transform:translateY(-5rem) rotateX(40deg) rotate(0deg) rotateY(180deg);
animation:rotate 8s linear infinite;
@keyframes rotate{
25%{
transform:translateY(-5rem) rotateX(60deg) rotate(-90deg) rotateY(160deg);
}
50%{
transform:translateY(-5rem) rotateX(60deg) rotate(-180deg) rotateY(180deg);
}
75%{
transform:translateY(-5rem) rotateX(60deg) rotate(-270deg) rotateY(200deg);
}
100%{
transform:translateY(-5rem) rotateX(40deg) rotate(-360deg) rotateY(180deg);
}
}
&:nth-of-type(2){
span.word{
span{
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image:linear-gradient(to bottom, #c779d0, #4bc0c8);
backface-visibility:hidden;
background-position:50% calc((var(--char-index) - 1) * 13rem);
animation:spin 4s ease-in-out infinite;
animation-delay:calc((var(--word-index)/3) * -1s);
}
}
}
span.word{
position:absolute;
width:0;
height:0;
left:calc(50% + 20rem);
top:0;
transform-origin:-20rem 50%;
transform:rotate(calc(360deg/var(--char-total) * var(--word-index))) scale(-1);
animation:origin 4s ease-in-out infinite alternate;
@keyframes origin{
to{
left:calc(50% + 15rem);
transform-origin:-15rem 50%;
}
}
span{
position:absolute;
width:5rem;
height:13rem;
left:calc(50% - 2.5rem);
top:calc(50% - 6.5rem);
font-size:4.5rem;
display:flex;
transform-origin:50% 50% -2.5rem;
justify-content:center;
align-items:center;
animation:spin 4s ease-in-out infinite;
animation-delay:calc((var(--word-index)/3) * -1s);
@keyframes spin{
100%{
transform:rotateY(360deg);
}
}
&:before, &:after{
content:attr(data-char);
position:absolute;
width:inherit;
height:inherit;
display:flex;
justify-content:center;
align-items:center;
left:100%;
backface-visibility:hidden;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image:linear-gradient(to bottom, #c779d0, #4bc0c8);
}
&:before{
transform-origin:left;
transform:rotateY(120deg);
}
&:after{
left:auto;
right:100%;
transform-origin:right;
transform:rotateY(-120deg);
}
}
}
}
}
View Compiled
Splitting();
This Pen doesn't use any external CSS resources.