Question

对于一个学校项目，我设计了一个网站，我试图在网站中加入动画徽标，但我无法正常显示所有组件。您可以在此处查看实时网站：http://students.washington.edu/torinw/anxiety/

<div id="logo">
        <div id="left">
            <div class="circle"></div>
            <div class="tail"></div>
            <div class="dot"></div>
            <div class="clip"></div>
        </div>
        <div id="right">
            <div class="circle"></div>
            <div class="tail"></div>
            <div class="dot"></div>
            <div class="clip"></div>
        </div>
        <div id="top">
            <div class="circle"></div>
            <div class="tail"></div>
            <div class="alpha"></div>
            <div class="dot"></div>
            <div class="clip"></div>
        </div>
        <div id="bottom">
            <div class="circle"></div>
            <div class="tail"></div>
            <div class="alpha"></div>
            <div class="dot"></div>
            <div class="clip"></div>
        </div>
    </div>
</div>

和CSS：

#logo {
height: var(--logo-size);
width: var(--logo-size);
top: 0;
bottom: 0;
margin: auto;
position: relative;
background: #1752a1;
}

#left, #right {
width: calc(var(--logo-size) / 2);
height: var(--logo-size);
margin-top: 0;
bottom: 0;
position: absolute;
border-bottom-left-radius: 50%;
overflow: hidden;
}

.circle {
position: absolute;
bottom: 50%;
left: 0;
border-top-left-radius: calc(var(--logo-size) / 4);
border-top-right-radius: calc(var(--logo-size) / 4);
background-color: rgba(0,0,0,.5);
height: calc(var(--logo-size) / 4);
width: calc(var(--logo-size) / 2);
z-index: 3;
}

.dot, .alpha {
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 10%;
width: 20%;
margin: auto;
background-color: white;
border-radius: 50%;
position: absolute;
z-index: 4;
}

.alpha {
background-color: rgba(0,0,0,.5);
z-index: 5;
}

.tail {
position: absolute;
bottom: 0;
border-bottom-left-radius: 100%;
background-color: rgba(0,0,0,.5);
height: calc(var(--logo-size) / 2);
width: calc(var(--logo-size) / 2);
overflow: hidden;
z-index: 1;
}

.clip {
position: absolute;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
background-color: #1752a1;
bottom: 0;
left: 50%;
width: calc(var(--logo-size) / 2);
height: calc(var(--logo-size) / 2);
z-index: 2;
}

#right {
left: 50%;
position: relative;
transform: rotate(180deg);
}

#top, #bottom {
display: inline;
width: calc(var(--logo-size) / 2);
height: var(--logo-size);
left: calc(var(--logo-size) / 4);
bottom: calc(var(--logo-size) / 4);
position: absolute;
overflow: hidden;
transform: rotate(90deg);
}

#bottom {
transform: rotate(270deg);
top: calc(var(--logo-size) / 4);
}

#top .circle, #top .tail, #bottom .circle, #bottom .tail {
background-color: white;
}

#top .dot, #top .clip, #bottom .dot, #bottom .clip {
position: absolute;
background-color: #1752a1;
}

你会看到我把它分成4个部分，每个部分都有相同的4或5个div，用于我制作的伪阴阳徽标的部分：半圆，圆点和/或alpha频道（用于着色目的，因为我计划添加更改主题的功能），尾部四分之一圈和一个剪辑＆＃39; div匹配背景并完成拱形尾部形状，以便我进行动画制作。我按照增加索引的顺序将z-index设置如下：tail，clip，circle，dot，alpha。通过这种方式，剪辑覆盖了尾部，另一个div的圆圈覆盖了另一个的剪辑等。

左，右和顶部的div似乎正好显示了我打算如何使用，这些图层在div之间正确重叠。但由于某种原因，底层div并没有遵循相同的规则。它的半圆和圆点都被覆盖了，但是左边的和尾部都有，并且底部的剪辑div覆盖了右边的圆圈和圆点div。

为什么这样做？我试图编写那些根本不起作用的徽标的方式有什么问题吗？如果您有其他方法可行，我也会接受这个想法。

我使用CSS制作的徽标的z索引存在问题，为什么它没有正确显示？

0 个答案: