0

我知道问题出在我的 CSS3 的某个地方，但作为一个新手，我根本无法弄清楚我做错了什么。我想做的是只使用 CSS3 和 HTML5 设置水平手风琴。

我要创建的效果是右侧的标签，旋转 90 度直到被选中。选定的标签我想要旋转回 0 度，我可以做得很好，并显示我放置在从右侧过渡的文章标签中的内容，即transform: width 0.3s ease-out;填充包含 div 元素的整个宽度。

这是 HTML -

<header>
<h1>Weedy101</h1>
</header>

<div class="horizontal">
    <div class="side">
        <input id="trig-a" name="trigger" type="radio" />
        <label for="trig-a">This is trig-a's rotated label</label>
        <article class="wide">
            <h3>This is the content in trig-a</h3>
            <p>I am keeping my fingers crossed but expect no mirracles on my first attempt considering I have never attempted a horizontal accordion before and the only examples I have seen use js.</p>
        </article>
    </div><!-- close the horizontal box -->

    <div class="side">
        <input id="trig-b" name="trigger" type="radio" checked="yes" />
        <label for="trig-b">label for trig-b</label>
        <article class="wide">
            <h3>trig-b</h3>
            <p>Just so it's different</p>
        </article>
    </div><!-- close the horizontal box -->
</div><!-- Close the new horizontal accordion -->

这是我的CSS -

.horizontal
{
    margin: 10px auto 30px auto;
    display: inline-block;
    position: relative;
    min-width: 100%;
    min-height: 450px;
}

.horizontal label
{
    font-family: 'News Cycle', sans-serif;
    font-weight: normal;
    padding: 5px 20px;
    position: relative;
    width: 450px;
    z-index: 20;
    display: inline-block;
    cursor: pointer;
    color: #0e3062;
    text-shadow: -1px 1px 1px #677283;
    line-height: 1.6em;
    font-size: 1.5em;
    background: linear-gradient(top, rgba(165,176,161,0.7) 2%, rgba(255,240,231,0.8) 46%, rgba(190,176,177,0.7) 98%);
    background: linear-gradient(to bottom, rgba(165,176,161,0.7) 2%, rgba(255,240,231,0.8) 46%, rgba(190,176,177,0.7) 98%);
    background: linear-gradient(rgba(165,176,161,0.7) 2%, rgba(255,240,231,0.8) 46%, rgba(190,176,177,0.7) 98%);
    background: -webkit-linear-gradient(top, rgba(165,176,161,0.7) 2%, rgba(255,240,231,0.8) 46%, rgba(190,176,177,0.7) 98%);
    box-shadow: 0px 0px 0px 1px rgba(191,183,178,1),
            1px 0px 0px 0px rgba(190,176,177,1),
            0px 2px 2px 0px rgba(34,34,34,1);
    transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
}

.horizontal label:hover,
.horizontal input:checked + label:hover
{
    color: #74450f;
    text-shadow: -1px 1px 1px #9b8e76;
    background: linear-gradient(top, rgba(165,176,161,0.5) 1%,     rgba(255,240,231,0.9) 46%, rgba(190,176,177,0.5) 99%);
    background: linear-gradient(top, rgba(165,176,161,0.5) 1%, rgba(255,240,231,0.9) 46%, rgba(190,176,177,0.5) 99%);
    background: linear-gradient(top, rgba(165,176,161,0.5) 1%, rgba(255,240,231,0.9) 46%, rgba(190,176,177,0.5) 99%);
    background: -webkit-linear-gradient(top, rgba(165,176,161,0.5) 1%, rgba(255,240,231,0.9) 46%, rgba(190,176,177,0.5) 99%);
    box-shadow: 0px 0px 0px -1px rgba(191,183,178,0.7),
            -1px 0px 0px 0px rgba(190,176,177,0.7),
            0px -2px -2px 0px rgba(34,34,34,0.7);
}

.horizontal input:checked + label
{
    color: #74450f;
    text-shadow: -1px 1px 1px #9b8e76;
    line-height: 2.0625em;
    font-size: 1.1875em;
    background: linear-gradient(top, rgba(165,176,161,1) 3%, rgba(255,240,231,1) 48%, rgba(190,176,177,1) 99%);
    background: linear-gradient(to bottom, rgba(165,176,161,1) 3%, rgba(255,240,231,1) 48%, rgba(190,176,177,1) 99%);
    background: linear-gradient(rgba(165,176,161,1) 3%, rgba(255,240,231,1) 48%, rgba(190,176,177,1) 99%);
    background: -webkit-linear-gradient(top, rgba(165,176,161,1) 3%, rgba(255,240,231,1) 48%, rgba(190,176,177,1) 99%);
    box-shadow: 0px 0px 0px 2px rgba(191,183,178,1),
            2px 0px 0px 0px rgba(190,176,177,1),
            0px 4px 4px 0px rgba(34,34,34,1);
    transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
}

.horizontal input
{
    display: none;
}

.horizontal article
{
    background: #ffffff;
    padding: 0px 15px 0px 15px;
    margin-top: -1px;
    overflow: hidden;
    width: 0px;
    height: 0em;
    position: relative;
    display: inline-block;
    z-index: 10;
    transition: width 0.5s ease-in;
    box-shadow: 0px 0px 0px 2px rgba(191,183,178,1);
    transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
}

.horizontal article p,
.horizontal article h3
{
    padding: 5px;
    text-shadow: -1px 1px 1px #647881;
}

.horizontal input:checked ~ article.wide
{
    max-width: 45em;
    width: 100%;
    height: 45em;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
}

并且在这里很好地衡量它正在做奇怪的事情 - http://weedy101.netii.net/horizo​​ntal.html

对此的任何帮助将不胜感激，我的下一阶段是将这个水平手风琴嵌套在我的工作垂直 CSS 唯一手风琴内，但我需要先让它独立工作。

4

0 回答 0