How to achieve text circular scrolling effect in css

Css method to implement text circular scrolling: 1. Use the animation attribute on the text element to bind a circular animation; 2. Use the "@keyframes" rule and the "transform: translateX (value %)" statement to set the animation The translation position of the text in each frame is enough.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css to achieve text cycle scrolling effect

In css, you can use animationh and keyframest to bind a cycle scroll to the text Animation to achieve text cycle scrolling effect.

Implementation code:

html:

<div class="box">
    <p class="animate">
        文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容
    </p>
</div>

css:

.box {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #ff6700;
    overflow: hidden;
}

.animate {
    padding-left: 20px;
    font-size: 12px;
    color: #000;
    display: inline-block;
    white-space: nowrap;
    animation: 5s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
    0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

@-webkit-keyframes wordsLoop {
    0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

Rendering:

Description:

The Transform property applies to the 2D or 3D transformation of the element. This property allows you to rotate, scale, move, tilt, etc. the element.

translateX(x): Define translation transformation, just using the value of the X axis.

(Learning video sharing: css video tutorial)

The above is the detailed content of How to achieve text circular scrolling effect in css. For more information, please follow other related articles on the PHP Chinese website!