制作一个永无止境的选框动画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，它也完全按照我的意愿工作 :) 对于那些可能对原始帖子有解决方案的人来说未来的参考请让我知道谢谢你，你会在下面找到我为那些希望做类似好运的人使用的代码。

<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>