php - 制作永无止境的字幕动画css3

Question

您好，我已经在 css3 中成功地进行了选取框转换，它从我的网站和数据库中滚动了我的 sql 数据，但我唯一的问题是我想要它，所以它下面永远不会有任何空间，并且它会一直持续下去，任何人都可以请帮助下面是我的代码和CSS

Live Preview Here

提前致谢

  display:block;
  width: 500px;
  position:absolute;
  text-align: center;
  animation-name: marquee;
  -webkit-animation-name: marquee; 
  animation-duration: 60s;
  -webkit-animation-duration: 60s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count:infinite;
  animation-direction:normal;
  -webkit-animation-direction:normal;
    #marquee:hover {
    	-webkit-animation-play-state: paused;
        animation-play-state: paused;
    }

@keyframes marquee {
  from { top: 100%; }
  to { top: 0%; }
}
}

@-webkit-keyframes marquee {
    from {top: 100%;}
    to {top: 0%;}
 }

<div id="main">
        <div class="marquee">
          <?php
require('connect.php');
$run = mysql_query("SELECT * FROM comment ORDER BY id DESC");

	$numrows = mysql_num_rows($run);
	if($numrows > 0){
		while($row = mysql_fetch_assoc($run)){
		$dbname = $row['name'];
		$dbrating = $row['rating'];
		$dbwebsite = $row['website'];
		$dbservice = $row['service'];
        $dbdate = $row['postdate'];
		$dbcomment = $row['comment'];
		$newDate = date("l dS F Y", strtotime($dbdate));
?>			

<div id="commenttop">
 <div id="userdetails"><?php echo "{$dbname} - {$dbservice}" ?></div>
  <div id="rating">
  <?php 
if ($dbrating == 1) {
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/star.png" alt="" width="20" height="20" /><img src="images/star.png" alt="" width="20" height="20" /><img src="images/star.png" alt="" width="20" height="20" /><img src="images/star.png" alt="" width="20" height="20" />';
}

if ($dbrating == 2) {
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" />';
}

if ($dbrating == 3) {
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" />';
}

if ($dbrating == 4) {
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" />';
}

if ($dbrating == 5) {
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" />';
}
?>
  </div>
</div>

<div id="commentbtm"><?php echo "$dbcomment"?>
<div id="date"><?php echo $newDate?></div>
</div>

<?php	
        }
	}
	else
		echo "No Comments Found";
?>

        </div>
        </div>

Answer 1

我无法使用 css3 找到或重新编码这个原始查询的解决方案，所以我决定使用 Javascript，它也完全按照我想要的方式工作 :) 对于那些可能对原始帖子有解决方案的人 future 的引用请让我知道谢谢你在下面你会找到我为那些希望做类似好运的人使用的代码。

<script>
window.addEventListener('load', function () {
    function go() {
        i = i < height ? i + step : 1;
        m.style.marginTop = -i + 'px';
    }
    var i = 0,
        step = 3,
        space = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
    var m = document.getElementById('marquee');
    var t = m.innerHTML; //text
    m.innerHTML = t + space;
    m.style.position = 'absolute'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789
    var height = (m.clientHeight + 1);
    m.style.position = '';
    m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space;
    m.addEventListener('mouseenter', function () {
        step = 0;
    }, true);
    m.addEventListener('mouseleave', function () {
        step = 3;
    }, true);
    var x = setInterval(go, 50);
}, true);
</script>

#marquee {
  border:1px solid #007df8;
  display:block;
  width: 500px;
  position:absolute;
  text-align: center;
}

<div id="main">  
        <div id="marquee"> 
        <div>  
          <?php  
require('connect.php');  
$run = mysql_query("SELECT * FROM comment ORDER BY id DESC");  

    $numrows = mysql_num_rows($run);  
    if($numrows > 0){  
        while($row = mysql_fetch_assoc($run)){  
        $dbname = $row['name'];  
        $dbrating = $row['rating'];  
        $dbwebsite = $row['website'];  
        $dbservice = $row['service'];  
        $dbdate = $row['postdate'];  
        $dbcomment = $row['comment'];  
        $newDate = date("l dS F Y", strtotime($dbdate));  
?>              

<div id="commenttop">  
 <div id="userdetails"><?php echo "{$dbname} - {$dbservice}" ?></div>  
  <div id="rating">  
  <?php   
if ($dbrating == 1) {  
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/star.png" alt="" width="20" height="20" /><img src="images/star.png" alt="" width="20" height="20" /><img src="images/star.png" alt="" width="20" height="20" /><img src="images/star.png" alt="" width="20" height="20" />';  
}  

if ($dbrating == 2) {  
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" />';  
}  

if ($dbrating == 3) {  
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" />';  
}  

if ($dbrating == 4) {  
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" />';  
}  

if ($dbrating == 5) {  
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" />';  
}  
?>  
  </div>  
</div>  

<div id="commentbtm"><?php echo "$dbcomment"?>  
<div id="date"><?php echo $newDate?></div>  
</div>  

<?php      
        }  
    }  
    else  
        echo "No Comments Found";  
?>  
        </div> 
        </div>  
        </div>