Question

如果运行附带的代码段，您将看到“ execute myProfile”键入动画扩展得太大；远远超出我为标题指定的宽度。

@import url(https://fonts.googleapis.com/css?family=Saira);

body{
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    font-family: 'Saira', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.exec{
    overflow: hidden;
    border-right: 2px orange;
    padding-right: 5px;
    white-space: nowrap;
    font-weight: lighter;
    margin: 0 auto;
    animation:
        typing 1s steps(20, end),
        cursor 0.5s step-end infinite;

}
@keyframes typing{
    from{width: 0}
    to{width: 100%}
}
@keyframes cursor{
    from, to {
        border-color: transparent;}
    50% {
        border-color: orange;
    }
}

<body>
    <h2 class="exec">execute myProfile();</h2>
</body>

我昨天制作了这个动画，打字动画效果很好。代码大致相同，但产生不同的结果。为什么会这样？

@import url(https://fonts.googleapis.com/css?family=Teko);
body{
    margin: 0;
    padding: 0;
    background-color: #3c3f41;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.exec h2{
    color: #fff;
    font-family: 'Teko', sans-serif;
    font-weight: lighter;
    overflow: hidden;
    border-right: 2px solid orange;
    padding-right: 5px;
    white-space: nowrap;
    margin: 0 auto;
    animation:
        typing 1s steps(20, end),
        cursor 0.5s step-end infinite;
    /*animation-delay: 5s;*/
}
@keyframes typing{
    from{ width: 0 }
    to{ width: 100% }
}
@keyframes cursor{
    from, to {
        border-color: transparent;}
    50% {
        border-color: orange;
    }
}

<body>
    <div class="exec">
        <h2>
            execute portfolio;
        </h2>
    </div>
</body>

键入动画CSS超出指定的宽度限制

0 个答案: