This article mainly describes how to use CSS to implement a button text sliding effect, has a certain reference value, now share to everyone, a friend can refer to the source code download
Please download it from GitHub.
Https://github.com/comehope/front-end-daily-challenges/tree/master/001-button-text-staggered-sliding-effects
Code interpretation
Define the DOM, define the text of the button in a container, one span per letter, and each span has a data-text attribute with the same value as the letter within span:
<p class= "box" > <span data-text= "B" >B</span> <span data-text= "U" >U</span> <span data-text= "T" >T</span> <span data-text= "T" >T</span> <span Data-text = "O" >O</span> <span data-text= "N" >N</span></p>
Center button:
HTML, body { height:100%; Display:flex; Align-items:center; Justify-content:center;}
To set the size and text style of a button:
. box { width:200px; height:60px; border:2px solid black; Text-align:center; font-size:30px; line-height:60px; Font-family:sans-serif;}
Each letter of the button is set to an inline block element to set the dynamic effect individually:
. Box span { display:inline-block; Color:blue;}
The letters are displayed in a staggered way outside the button container, and the odd number of elements appears on the top, and an even number of elements appear below:
. Box Span:nth-child (odd) { Transform:translatey (-100%);}. Box Span:nth-child (even) { transform:translatey (100%);}
Add a copy of each letter with a pseudo-element:
. Box Span::before { content:attr (data-text); Position:absolute; color:red;}
The letters of the pseudo-elements are also interlaced, and the positions are relative to their original elements:
. Box Span:nth-child (ODD):: Before { transform:translatey (100%);}. Box Span:nth-child (even):: Before { Transform:translatey (-100%);}
For the button to increase the mouse over style, set the buffer time, so that it has animation effect:
. box:hover span { transform:translatey (0);}. Box span { transition:0.5s;}
Finally, hide the contents outside the container:
. box { Overflow:hidden;}
Done!
The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!