Question

这是我从StackOverflow帖子中获取的一个例子我想要有类似的效果但是当我将鼠标悬停在div上时它会扩展。但是我想在只通过css加载页面时进行扩展。我可以通过jquery实现它，但我只想通过css完成它。有人可以帮忙吗？

＆＃13;

.wrapper {
    background:#DDD;
    display:inline-block;
    padding: 10px;
    height: 20px;
    width:auto;
}

.label {
    display: inline-block;
    width: 1em;
}

.contents, .contents .inner {
    display:inline-block;
}

.contents {
    white-space:nowrap;
    margin-left: -1em;
    padding-left: 1em;
}

.contents .inner {
    background:#c3c;
    width:0%;
    overflow:hidden;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}



.wrapper:hover .contents .inner {
   
    width:100%;
}

＆＃13;

<div class="wrapper">
    <span class="label">+</span><div class="contents">
        <div class="inner">
            These are the contents of this div
        </div>
    </div>
</div>

＆＃13;

Answer 1

请添加此类，以便在页面加载时为全宽

    .wrapper .contents .inner
    {
    width:100%;
    animation-name: example;
animation-duration: 4s;
    }
    @keyframes example {
        0%   {width:0%;}
        100% {width:100%;}
    }

Answer 2

以下是仅使用css3的解决方案，您可以检查动画属性Here。

.wrapper {
    background:#DDD;
    display:inline-block;
    padding: 10px;
    height: 20px;
    width:auto;
}

.label {
    display: inline-block;
    width: 1em;
}

.contents, .contents .inner {
    display:inline-block;
}

.contents {
    white-space:nowrap;
    margin-left: -1em;
    padding-left: 1em;
}

.contents .inner {
    background:#c3c;
    width:0%;
    overflow:hidden;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}


.inner {
    width: 0px;
    background-color: red;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    from {width: 0px;}
    to {width: 100%;}
}

/* Standard syntax */
@keyframes example {
    from {width: 0px;}
    to {width: 100%;}
}

<div class="wrapper">
    <span class="label">+</span><div class="contents">
        <div class="inner">
            These are the contents of this div
        </div>
    </div>
</div>

将div扩展到100％宽度

2 个答案: