Heim > Artikel > Web-Frontend > Mit CSS3 wird der Text regelmäßig nach oben gescrollt
Mit CSS3 wird der Text regelmäßig nach oben gescrollt
- 不言Original
- 2018-06-25 15:24:544033Durchsuche
Früher hat im Grunde jeder Javascript verwendet, um den Effekt zu erzielen, dass Text in regelmäßigen Abständen nach oben scrollt. Deshalb werde ich Ihnen heute zeigen, wie Sie diesen Effekt mit CSS3 erzielen können.
Es gibt nicht viel zu sagen, gehen wir direkt zum Beispielcode
<!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>Das Obige ist der gesamte Inhalt dieses Artikels, der für das Lernen aller hilfreich sein wird. Bitte achten Sie auf die chinesische PHP-Website!
Verwandte Empfehlungen:
Schöne Schaltflächen im CSS-Stil erstellt
CSS-Seitenlayout mit linken, mittleren und rechten Spalten Implementieren
Das obige ist der detaillierte Inhalt vonMit CSS3 wird der Text regelmäßig nach oben gescrollt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!