Mit CSS3 wird der Text regelmäßig nach oben gescrollt-CSS-Tutorial-php.cn

Mit CSS3 wird der Text regelmäßig nach oben gescrollt

不言

Freigeben： 2018-06-25 15:24:54

Original

4071 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!