Maison > Article > interface Web > Texte défilant régulièrement en utilisant CSS3
Texte défilant régulièrement en utilisant CSS3
- 不言original
- 2018-06-25 15:24:543963parcourir
Dans le passé, tout le monde utilisait essentiellement Javascript pour obtenir l'effet de défilement du texte vers le haut à intervalles réguliers. Je vais donc aujourd'hui partager avec vous comment utiliser CSS3 pour obtenir cet effet. Si vous en avez besoin, vous pouvez vous y référer.
Pas grand chose à dire, passons directement à l'exemple de code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>moveUp</title>
<style>
ul,li{ margin:0; padding:0; }
li{ list-style:none; }
.container{ display:inline-block; background:#efefef; padding:10px; border:1px solid #ccc; font-family:"Microsoft YaHei"; }
.container .li-box{ height:28px; overflow:hidden; }
.container ul{ position:relative; animation: moveUp 8s 0.6s infinite; -webkit-animation: moveUp 8s 0.6s infinite; }
@keyframes moveUp
{
0% {top:0px;}
18% {top:0px;}
20% {top:-28px;}
38% {top:-28px;}
40% {top:-56px;}
58% {top:-56px;}
60% {top:-84px;}
78% {top:-84px;}
80% {top:-112px;}
98% {top:-112px;}
}</p> <p> @-webkit-keyframes moveUp /*Safari and Chrome*/
{
0% {top:0px;}
18% {top:0px;}
20% {top:-28px;}
38% {top:-28px;}
40% {top:-56px;}
58% {top:-56px;}
60% {top:-84px;}
78% {top:-84px;}
80% {top:-112px;}
98% {top:-112px;}
}
.container li{ line-height:1.8; color:#666; }
</style>
</head>
<body>
<p>
<p>
<ul>
<li>飞鲨勇士张超：曾驾歼-8战机逼退外军侦察机</li>
<li>台媒炒作大陆军机飞临台海 台军方：全程监控</li>
<li>菲总统对华为何晴转阴：先期待“访华”后欲“清算中国”</li>
<li>外媒称韩国醉心中等强国地位 屡次在关涉中国时遇挫</li>
<li>伊朗官方回应日本驻伊大使被扣押：没有的事儿</li>
<li>菲总统对华为何晴转阴：先期待“访华”后欲“清算中国”</li>
</ul>
</p>
</p>
</body>
</html>Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun pour en savoir plus. contenu, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
Beaux boutons créés à l'aide du style CSS
Mise en page CSS avec colonnes de gauche, du milieu et de droite
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!