0

前两个键是可操作的（最左边的键和旁边的黑键）。这里是托管的，所以你可以看到

http://23.23.184.26/miller/keyboardanimation/main.html

我必须重新绘制整个键盘，因为每个键的 3d 特性不会留下可以用方形图像替换的方形轮廓。我在任何地方都看不到梯形元素的支持...

我应该在 SVG 或画布中执行此操作吗？我觉得我这样做的方式真的很愚蠢。

而且，有时我会在转换之间出现奇怪的白色闪光（我认为仅在 IE9 上）

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        a{
            color:white;
        }
        #main{
            background:white url('0.gif') no-repeat 0 0;
            position:relative;
            z-index:0;
            width:506px;
            height:319px;
        }

        #key1{
            position:absolute;
            width:50px;
            height:75px;
            top:175px;
            left:55px; 
        }
        #key2{
            position:absolute;
            width:50px;
            height:75px;
            top:100px;
            left:85px;
        }
        /*uncomment this to show button zones*/
        /*#key1:hover, #key2:hover{
            border:1px solid red;
        }*/
    </style>
</head>

<body>
    <div id="main">
        <div id="key1" onMouseDown="document.getElementById('main').style.background = 'url(1.gif)'" onMouseUp="document.getElementById('main').style.background = 'url(0.gif)'"></div>
        <div id="key2" onMouseDown="document.getElementById('main').style.background = 'url(2.gif)'" onMouseUp="document.getElementById('main').style.background = 'url(0.gif)'"></div>
    </div>
</body>

4

1 回答 1

2

您没有使用 CSS 动画：-/，您正在使用 Javascript 进行简单的背景转换。

也就是说，还有一个小细节，如果你使用画布来绘制钢琴动画，你需要“重新绘制”没有变化的钢琴和变化的钢琴的每个部分。

我建议您在 SVG 中执行此操作并为其设置动画，因为您将拥有更少的动画部分:-)。

问候！贡萨洛·G。

于 2012-05-22T19:31:20.013 回答