How to use CSS to achieve the effect of a button text swipe

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!