Article From:https://segmentfault.com/q/1010000011698306
Question:

How do you achieve a long text horizontal scroll without using any JS code?

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pure CSS achieves the text rolling effect < /title>< style type= "text/css" >* {Margin: 0;Padding: 0;}.box {Width: 300px;Margin: 0 Auto;Position: relative;Border: 1px solid #ff6700;}.animate{Padding-left: 20px;Font-size: 12px;Color: #000;White-space: nowrap;Animation: 15s wordsLoop linear infinite normal;}@keyframes wordsLoop {0% {{Transform: translateX (0px);-webkit-transform: translateX (0px);}100% {{Transform: trAnslateX (-100%);-webkit-transform: translateX (-100%);}}@-webkit-keyframes wordsLoop {0% {{Transform: translateX (0px);-webkit-transform: translateX (0px);}100% {{TraNsform: translateX (-100%);-webkit-transform: translateX (-100%);}}< /style>< /head>< body>< div class= "box" >< P class= "animate">You do not see the water of the Yellow River in the sky, run to the sea and never return, you do not see the high mirror sad white hair, like silk evening snow, life must be full of joy, do not make the golden sky to the moon< /p>< /div>< /Body>< /html>

The above is my own implementation, but always to the “gold” here horizontal rolling is over, how to solve it?

Answer 0:

Let’s talk about solutions first.

 .animate {
            padding-left: 20px;
            font-size: 12px;
            color: #000;
            display: inline-block;//Add this sentence.White-space: nowrap;Animation: 15s wordsLoop linear infinite normal;}

The following reasons are explained:
First of all, here..boxThe width is set to 300px.<p>Because it is a block level element, the default width is100%,Here it is 300px, but<p>The width of the text is actually over 300px.transform: translateX(-100%);The intention is to let<p>Finally, it can be offset.Length of whole paragraph,But unfortunately, because P is a block level element,transform: translateX(-100%);The role here is equivalent totransform: translateX(-300px);So if your text isn’t exactly 300 px, the final scroll stops at the end of the text.

Add updisplay: inline-blockAfter the attribute,<p>The width is the width of the paragraph, and naturally there will be no such problems.

Answer 1:

.animate Add one

    display: inline-block;

Answer 2:

I am also the same code, why the page widened. Check the elements without overflow.

Leave a Reply

Your email address will not be published. Required fields are marked *