将具有独特CSS样式的多个HTML画布相互叠加_Html_Css

将具有独特CSS样式的多个HTML画布相互叠加

html css

将具有独特CSS样式的多个HTML画布相互叠加,html,css,Html,Css,我是stackoverflow和编程新手我现在正在设计一个网站，想知道是否有人能帮我弄清楚如何将多个HTML画布堆叠在一起，每个画布都附有自己的CSS样式现在我在页面中间有一个正方形，上面有一个CSS样式，它建立了它的大小，动画了它的成长等等。我想这是几个具有相同效果的大方块的顶层（也就是一系列同心的方块，当它在上面时，所有的方块都稍微膨胀）。以下是我的HTML代码： <html> <head> <meta charset="utf-8"/>

我是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>

及

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

任何想法都将不胜感激

谢谢

如果不添加其余的标记，我认为我们无法复制它。。试着在这里的代码片段上或者在Hey上这样做，谢谢你的回复。你是说我要创建的其余框的标记吗？以上的HTML和CSS是我目前为止所拥有的全部，当你在浏览器中加载它们时，它们会产生一个正方形，当你将它们悬停在上面时会增长。你提到覆盖更多的div，所以我猜你也会将它们添加到HTML中。我明白了，好的，我会尝试添加我对它们的想法，然后再回复你。好的，所以我认为这段代码会在较小的方块（hvr-grow.css应用于画布id“magazine 1”）后面显示较大的方块（hvr-grow.css应用于画布id“magazine 2”），但它只显示较小的方块。

 @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);
}