Pour faire défiler du texte en HTML et CSS, et créer un bandeau "breaking news", vous pouvez :
- Créer des
CLASS CSS pour positionner et concevoir le bandeau.
- Utiliser la propriété CSS animation pour définir les propriétés de l'animation.
- Utiliser la fonction translate3d() pour le défilement.
- Appliquer des règles @keyframes pour définir les séquences de l'animation CSS.
Voici un exemple pour faire défiler du texte en HTML et CSS, en bas de page, sous la forme d'un bandeau d'actualité :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment faire défiler du texte en HTML et CSS ?</title>
<style>
.position {
position: fixed;
bottom: 0;
left: 0;
}
.logo {
height: 50px;
width: 150px;
line-height: 50px;
font-size: 25px;
color: white;
background-color: red;
text-align: center;
}
.bandeau {
width: 100%;
overflow: hidden;
height: 50px;
background-color: #000;
padding-left: 100%;
margin-left: 150px;
}
.actu {
display: inline-block;
height: 50px;
line-height: 50px;
white-space: nowrap;
padding-right: 100%;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: actu;
animation-name: actu;
-webkit-animation-duration: 30s;
animation-duration: 30s;
}
.actu_titre {
display: inline-block;
padding: 0 25px;
font-size: 25px;
color: white;
}
@-webkit-keyframes actu {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes actu {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
</style>
</head>
<body>
<div class="position logo">NEWS</div>
<div class="position bandeau">
<div class="actu">
<div class="actu_titre">Comment faire défiler un premier texte en HTML et CSS ?</div>
<div class="actu_titre">Comment faire défiler un second texte en HTML et CSS ?</div>
<div class="actu_titre">Comment faire défiler un troisième texte en HTML et CSS ?</div>
<div class="actu_titre">Comment faire défiler un quatrième texte en HTML et CSS ?</div>
<div class="actu_titre">Comment faire défiler un cinquième texte en HTML et CSS ?</div>
</div>
</div>
</body>
</html>
