Question

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

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

我必须重绘WHOLE键盘，因为每个键的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>

Answer 1

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

那说还有另外一个小细节，如果你使用画布来绘制和制作钢琴的动画，你将需要“重新画”不改变的钢琴和钢琴的每个部分都会发生变化。

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

问候！ Gonzalo G.

简单的CSS动画，我应该在canvas或SVG中这样做吗？

1 个答案: