Comment obtenir un défilement circulaire transparent du texte d'actualité en utilisant CSS3 ? (exemple)

Cet article présente principalement comment utiliser CSS3 pour obtenir une connexion transparente et un effet de boucle non-stop. Cette boucle d'animation CSS s'applique non seulement aux images mais aussi aux champs de texte, etc. Tant que vous comprenez ce qu’ils ont en commun, c’est-à-dire quelles sont les idées principales, vous pouvez tirer des conclusions d’un exemple à d’autres cas.

1. L'exemple de code HTML spécifique est le suivant :

<div class="list">
    <div class="cc rowup">
        <div class="item">1- 这是一段新闻描述一</div>
        <div class="item">2- 这是一段新闻描述二</div>
        <div class="item">3- 这是一段新闻描述三</div>
        <div class="item">4- 这是一段新闻描述四</div>
        <div class="item">5- 这是一段新闻描述五</div>
        <div class="item">6- 这是一段新闻描述六</div>
        <div class="item">7-这是一段新闻描述七</div>
  <div class="item">8-这是一段新闻描述八</div>
     <div class="item">9- 这是一段新闻描述</div>
        <div class="item">1- 这是一段新闻描述一</div>
        <div class="item">2- 这是一段新闻描述二</div>
        <div class="item">3- 这是一段新闻描述三</div>
        <div class="item">4- 这是一段新闻描述四</div>
        <div class="item">5- 这是一段新闻描述五</div>
        <div class="item">6- 这是一段新闻描述六</div>
        <div class="item">7- 这是一段新闻描述七</div>
        <div class="item">8- 这是一段新闻描述八</div>
     <div class="item">9- 这是一段新闻描述</div>
    </div>
</div>

2. Le code CSS spécifique est le suivant :

@keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -307px, 0);
        transform: translate3d(0, -307px, 0);
    }
}
.list{
    width: 300px;
    border: 1px solid #999;
    margin: 20px auto;
    position: relative;
    height: 200px;
    overflow: hidden;
}
 
.list .rowup{
    -webkit-animation: 10s rowup linear infinite normal;
    animation: 10s rowup linear infinite normal;
    position: relative;
}

L'idée principale de ​​l'implémentation de l'animation en boucle CSS ci-dessus est :

Par exemple, si nous voulons créer un effet d'animation en boucle transparente vers le haut, nous pouvons copier une donnée identique B de A et la placer derrière les données d'origine A ; pour faire défiler vers le haut le conteneur parent de A lorsque la distance de défilement vers le haut est L Lorsque la hauteur de A est exactement (L==A.height()), L=0, le défilement recommence et la boucle est sans fin.

Copiez les données et placez-les à l'arrière de sorte que lorsque A monte, il y ait des données à l'arrière pour combler les lacunes. Lorsque B se déplace vers le haut de la zone visible et que A sort simplement de la zone visible, le conteneur est réinitialisé à 0. L'utilisateur ne le perçoit pas et pense qu'il s'agit toujours de la première donnée de B. Continuez ensuite à faire défiler vers le haut.

Remarque :

Si vous souhaitez utiliser les attributs CSS3 pour l'implémenter, il doit s'agir d'une animation, car la transition doit être déclenchée manuellement et ne peut pas être exécutée à l'infini, et l'animation peut résoudre ce problème. .

Cet article est une introduction à la boucle d'animation CSS. J'espère qu'il sera utile aux amis dans le besoin.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!