带有JavaScript和CSS的动画图像(如非GIF）

Animated image (e.g. non-GIF) with JavaScript and CSS?

本文关键字：如非 GIF 图像 动画 JavaScript CSS 带有      更新时间：2023-09-26

在使用此方法时，我一直在尝试用JavaScript制作.png文件的动画。这是我想要制作动画的.png文件。我希望动画标志是正确的"Cupcquake"，但标志甚至没有出现，更不用说动画了。但是，将HTML中的"span class=logoCquake"更改为div类会显示徽标，但它位于文本下方

我的JavaScript文件：

var scrollUp = (function () {
  var timerId;
  return function (height, times, element) {
    var i = 0;
    timerId = setInterval(function () {
      if (i > times)
        i = 0;
      element.style.backgroundPosition = "0px -" + i * height + 'px';
      i++;
    }, 100);
  };
})();
scrollUp(130, 30, document.getElementByClass('logoCquake'))

我的HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../css/normalize.css" />
    <link rel="stylesheet" href="../css/style.css" />
    <script src="../scripts/logoCquake.js" type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Cupquake - Home</title>
</head>
<body>
<div class="wrapper">
    <div class="header">
        <div class="topbar">
            <div class="mCquake">
            </div>
        </div>
        <br>
        <br>
        <br>
        <span class="ninja">Ninja</span><span class="cupquake">Cupquake</span><span class="logoCquake"></span>
    </div>
</div>
</body>
</html>

CSS文件：

@font-face
{
    font-family: typo_semib;
    src: url('fonts/typo_semib.ttf');
}
@font-face
{
    font-family: typo_light;
    src: url('fonts/typo_light.ttf');
}
.wrapper .header
{
    height: 250px;
    width: 100%;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffa200), color-stop(100%,#d25400));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa200',endColorstr='#d25400',GradientType=0);
    background: -moz-linear-gradient(top,#ffa200,#d25400);
    background-image: -o-linear-gradient(#ffa200,#d25400);
    overflow: hidden;
}
.wrapper .header .topbar
{
    height: 60px;
    background-image: url(../imgz/head/hBarSBg.png);
    background-repeat: repeat-x;
}
.wrapper .header .topbar .mCquake
{
    height: 37px;
    width: 278px;
    background-image: url(../imgz/head/mCqRight.png);
    background-repeat: no-repeat;
    float: none;
    float: right !important;
    margin-right: 10px;
    margin-top: 11.5px;
    margin-bottom: 11.5px;
}
.wrapper .header .ninja
{
    font-family: typo_semib;
    font-size: 48px;
    color: #303030;
    margin-left: 55px;
}
.wrapper .header .cupquake
{
    font-family: typo_light;
    font-size: 48px;
    color: #303030;
}
.wrapper .header .logoCquake
{
    height: 112px;
    width: 130px;
    background-image: url(../imgz/logo/logoCquake.png);
    background-repeat: no-repeat;
}

编辑：

再次尝试，但使用此处列出的第二种方法，仍然一无所获。以下是我当前的HTML和JS代码：

JS:

function SpriteAnim (options) {
  var timerId,
      i = 0,
      element = document.getElementByClass(options.elementClass);
  element.style.width = options.width + "px";
  element.style.height = options.height + "px";
  element.style.backgroundRepeat = "no-repeat";
  element.style.backgroundImage = "url(" + options.sprite + ")";
  timerId = setInterval(function () {
    if (i >= options.frames) {
      i = 0;
    }
    element.style.backgroundPosition = "0px -" + i * options.height + "px";
     i ++;
  }, 100);
  this.stopAnimation = function () {
    clearInterval(timerId);
  };
}
var cupcake = new SpriteAnim({
  width: 130,
  height: 112,
  frames: 30,
  sprite: "..'imgz'logo'logoCquake.png",
  elementClass : "logoCquake"
});

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../css/normalize.css" />
    <link rel="stylesheet" href="../css/style.css" />
    <script language="javascript" src="SpriteAnim.js">
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Cupquake - Home</title>
</head>
<body>
<div class="header">
    <div class="topbar">
        <div class="mCquake">
        </div>
    </div>
    <span class="ninja">Ninja </span><span class="cupquake">Cupquake</span><span class="logoCquake"></span>
</div>
</div>
</body>
</html>

我的代码似乎可以工作：

<!doctype html>
<style>
div{background:url(http://i1243.photobucket.com/albums/gg555/Nyanja/logoCquake.png);height:33px;width:39px}
</style>
<div id=anim></div>
<script>
var i=0;
setInterval(function(){i+=33.6;document.getElementById("anim").style.backgroundPosition="0px "+i+"px"},100)
</script>

我相信"span"标记是一个内联元素，它要么需要"display:block"属性，要么需要"float:left"，我尝试了你的代码，在我用类"logoCquake"将"display:block"添加到"span"标签后，它对我有效。希望这对你有帮助。

注意：如果使用"display:block"，则span将移动到新行，如果使用"float:left"，则"span"标记将移动到文本的左侧。

相关文章：