Exemple de code pour faire défiler du texte en utilisant CSS

Le contenu de cet article concerne l'exemple de code de texte défilant CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Rendu

Description de l'image : La flèche pointe vers la pièce, avec un fond blanc, défilant de gauche à droite. (Ne s'applique pas à IE)

Code

html

<div>   
例子：
<div>
<span>滚动的文字，我是滚动的文字</span>
</div>
</div>

CSS

.box {
    height: auto;
    background-color: blue;
}

.box-text{
    color: white;
    background: -ms-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
    background: -webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: slidetounlock 3s infinite;
    -webkit-animation: slidetounlock 3s infinite;
}

@-webkit-keyframes slidetounlock{
    0%  {
        background-position:-200px 0
    }
    
    100% {
        background-position:200px 0
    }
}

Principe de mise en œuvre

1. Effet d'animation

@-webkit-keyframes

Définir un ensemble d'animations Dans cette animation, la position de l'arrière-plan est modifiée (notez la position du texte)

2. Pourquoi choisir le texte comme. l'arrière-plan Au lieu de tout l'arrière-plan ?

background-clip: text;
作用：指定绘图区的背景
除了text外，还包括 ：border-box|padding-box|content-box;三个属性

3. Comment obtenir un petit effet de changement ?

gradient()

Fonction : Dégradé
Comme vous pouvez le voir sur l'effet réel, tout sauf la partie blanche est gris, et plus elle est proche du blanc, plus elle devient blanche.

-ms-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));

Description : Type de dégradé, dégradé linéaire (z=x*y)
à gauche :
Définissez le dégradé de droite à gauche. Equivalent à : 270deg
à droite :
définit le dégradé de gauche à droite. Équivalent à : 90deg
to top :
définit le dégradé de bas en haut. Équivalent à : 0deg
to bottom :
définit le dégradé de haut en bas. Équivalent à : 180°. Il s'agit de la valeur par défaut, ce qui équivaut à la laisser vide.

De cette façon, la partie police dégradée est réalisée

-webkit-text-fill-color: transparent;

Couleur de remplissage de la police : héritée et arrière-plan, donc la couleur de la police est l'arrière-plan de la zone de texte définie, pas la couleur de fond de la boîte.

Ajoutez simplement une animation et déplacez-vous en boucle, et le tour est joué.

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!