You might find it a lot easier to get your text as an image, splice it in two horizontally, and slide those two images inside a div with an animation. As far as I am aware there isn’t anything I have ever touched in CSS that does what you’re asking.
The only work around I can think of is making CSS to write out the letters via animation, and adjusting that animation to offset it when it is below a certain Y axis? That seems like a huge amount of work compared to splicing an image.
/* Aligning container in center*/
.container {
position: absolute;
transform: translate(-50%, -50%);
top: 35%;
left: 35%;
color: Black;
}
/* General styling to text and
transition of 2s*/
.text {
position: absolute;
text-transform: uppercase;
font-size: 7rem;
}
/* Giving shapes to text using clip-path*/
.text1 {
clip-path: inset(56px 0 0 0px);
}
.text2 {
clip-path: inset(0px 0 73px 0px);
}
/* transforming box 1 position on hover */
.box .text1 {
transform: translateX(3px);
}
/* transforming box 2 position on hover */
.box .text2 {
transform: translateX(10px);
}
HTML:
<!-- Create container -->
<div class="container">
<!-- create div with class box -->
<div class="box">
<!-- write the text to be splitted
into two p tags -->
<p class="text text1">Web3</p>
<p class="text text2">Web3</p>
</div>
</div>
2
Answers
You might find it a lot easier to get your text as an image, splice it in two horizontally, and slide those two images inside a div with an animation. As far as I am aware there isn’t anything I have ever touched in CSS that does what you’re asking.
The only work around I can think of is making CSS to write out the letters via animation, and adjusting that animation to offset it when it is below a certain Y axis? That seems like a huge amount of work compared to splicing an image.
Try
Css:
HTML: