css3文字跑马灯

<div class="box">

    <div class="inner">

        <span>Hello World</span>

    </div>

    <div class="inner">

        <span>Hello World</span>

    </div>

</div>

body {

    height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: navajowhite;

}

.box {

    display: flex;

}

.box .inner {

    width: 400px;

    height: 200px;

    line-height: 200px;

    font-size: 4em;

    font-family: sans-serif;

    font-weight: bold;

    white-space: nowrap;

    overflow: hidden;

}

.box .inner:first-child {

    background-color: indianred;

    color: darkred;

    transform-origin: right;

    transform: perspective(100px) rotateY(-15deg);

}

.box .inner:last-child {

    background-color: lightcoral;

    color: antiquewhite;

    transform-origin: left;

    transform: perspective(100px) rotateY(15deg);

}

.box .inner span {

    position: absolute;

    animation: marquee 5s linear infinite;

}

.box .inner:first-child span {

    animation-delay: 2.5s;

    left: -100%;

}

@keyframes marquee {

    from {

        left: 100%;

    }

    to {

        left: -100%;

    }

}

学习+分享