Question

我是stackoverflow和编程的新手。

我现在正在设计一个网站，并且想知道是否有人可以帮我弄清楚堆叠多个HTML画布是如何叠加在彼此之上的，每个都附有自己的CSS样式。

现在我在页面中间有一个正方形，附有一个CSS样式，它确定了它的大小，动画了它的增长等等。我希望这是几个更大的正方形的顶层效果（即一系列同心方格，当鼠标悬停时都会略微扩展。）

这是我的HTML代码：

<html>
  <head>
    <meta charset="utf-8"/>
    <link href="hvr-grow.css" rel="stylesheet" type="text/css">
    <link href="hvr-grow2.css" rel="stylesheet" type="text/css">
  </head>
  <body onLoad="draw();">
        <div>
        <canvas class="hvr-grow" id="magazine 1"></canvas> </div>
        <div> <canvas class="hvr-grow2" id="magazine 2"></canvas> </div>
  </body>
</html>

这是我的CSS：

 @charset "UTF-8";
/* Hover-Grow */

.hvr-grow {
    background-color: #CCC;
    display: block;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
    position: absolute;
    top: 50%; left: 50%;
    width: 450px;
    height: 450px;
    margin: -225px 0 0 -225px; 
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    transform: scale(1.03);
}

并且

@charset "UTF-8";
/* Hover-Grow 2 */

.hvr-grow {
    background-color: #000;
    display: block;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
    position: absolute;
    top: 50%; left: 50%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px; 
    z-index: 2;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    transform: scale(1.03);
}

我在想canvas style =“z-index：...”可能会有所帮助，但我不确定如何在这种情况下实现它。

任何想法都将不胜感激！

谢谢！

在彼此之上叠加具有独特CSS样式的多个HTML画布

0 个答案: