Question

我在页面上有一张地图，我有一张图像可以从X移动到Y作为静止png图像。

我想将此更改为将静止图像变为动画图像，然后返回静止图像。

这就是我现在在CSS文件和PHP文件中的内容。如何更改CSS或PHP文件以便我看不到所有图像？我想创建一个“行走”动作（可能是通过一个图像显示另一个图像？然后隐藏先前显示的图像？）

div.animate-stills
{
  width: 13px;
  height: 30px;
  position: absolute;
  -webkit-animation: mymove 5s 1;
  animation: mymove 5s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

<head>
  <link rel="stylesheet" href="vault/style_animate.css">
  <?php /* my php here */ ?>
  <style>
    /* ANY DIRECTION */
    @-webkit-keyframes mymove
    {
      from {top: <?php echo "$playerlocation_y"; ?>px; left: <?php echo "$playerlocation_x"; ?>px;}
      to {top: <?php echo "$move_y"; ?>px; left: <?php echo "$move_x"; ?>px;}
    }
    @keyframes mymove
    {
      from{top: <?php echo "$playerlocation_y"; ?>px; left: <?php echo "$playerlocation_x"; ?>px;}
      to{top: <?php echo "$move_y"; ?>px; left: <?php echo "$move_x"; ?>px;}
    }
  </style>
</head>
<body>
  <?php /* my php here */
echo '<div class="animate-stills" syle="position: absolute; top: ' . $playerlocation_y . 'px; left: ' . $playerlocation_x . 'px; background-image: url(' . $img_1 . '),url(' . $img_2 . '),url(' . $img_3 . '),url(' . $img_4 . '),url(' . $img_5 . '),url(' . $img_6 . '),url(' . $img_7 . '),url(' . $img_8 . '); background-size: contain; background-position: center center; width: 13px; height: 30px;"></div>';
  ?>
</body>

我已经简化了php，所以你可以对它有所了解。所有$变量都是从数据库中声明和/或从中获取的。

HTML输出以下内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>SKULLS AND BONES</title>
    <link rel="stylesheet" href="vault/style.css">
    <link rel="stylesheet" href="vault/style_animate.css">
    <link rel="stylesheet" href="vault/style_hex50.css">
    <link rel="icon" href="favicon.ico" />
    <!-- <script src="script.js"></script> -->
    <style>
       /* ANY DIRECTION */
       /* Chrome,Safari,Opera */
       @-webkit-keyframes mymove
        {
          from {top: 86px; left: 232px;}
          to {top: 86px; left: 284px;}
        }
        /* Default syntax */
        @keyframes mymove
        {
          from {top: 86px; left: 232px;}
          to {top: 86px; left: 284px;}
        }
</style>
  </head>
  <body>
<div class="animate-stills" style="position: absolute; top: 86px; left: 232px; background-image: url(vault/images/alpha/player_male_1.png), url(vault/images/alpha/test_male02.png), url(vault/images/alpha/test_male03.png), url(vault/images/alpha/test_male04.png), url(vault/images/alpha/test_male05.png), url(vault/images/alpha/test_male06.png), url(vault/images/alpha/test_male07.png), url(vault/images/alpha/test_male08.png); background-size: contain; background-position: center center; width: 32px; height: 32px;"></div>
  </body>
</html>

我缩短了输出以获得更好的阅读效果。

Answer 1

经过很长一段时间的摆弄和搜索谷歌更多关于这个问题，我找到了一些解决方案。我不得不做一些改变。这是CSS文件。

＆＃13;

div.animate-movement
{
    background: url(images/alpha/MaleWalkingSheet128x30.png);
    width: 16px;
    height: 30px;
    transform: translate3d(0,0,0);
    -webkit-animation: mymove 2.1s steps(8) 3;
    animation: mymove 2.1s steps(8) 3;
}

＆＃13;

以下是html文件中php的一些输出。我把它放在php文件中，因为值总是在变化。

＆＃13;

/* ANY DIRECTION */
/* Chrome,Safari,Opera */
@-webkit-keyframes mymove
{
    from {top: 209px; left: 206px;}
    to {top: 250px; left: 232px;}
    from {background-position: 0px; }
    to {background-position: -128px; }        	   	
}
/* Default syntax */
@keyframes mymove
{
    from {top: 209px; left: 206px;}
    to {top: 250px; left: 232px;}
    from {background-position: 0px; }
    to {background-position: -128px; }       	   	
}

<div class="animate-movement"></div>

＆＃13;

我现在似乎唯一的问题是它有时候看起来像是图像变形了＃39;向后移动到结束动画之前的位置。我搜索谷歌这个，因此我添加：transform：translate3d（0,0,0）;到css文件。显然将动画转换为GPU？动画有时会扭曲变形＆＃39;有什么方法可以解决这个问题吗？

css3多个背景图像在移动时淡入淡出

1 个答案: