文字更换格子不顶头问题

img

代码如下


<div class="search">
                <div class="txt_change">
                    <em>域名</em>
                    <div class="txt_change_bottom">
                        <em>2022云栖大会</em>
                        <em>金秋云创季</em>
                    </div>
                </div>
                <i></i>
</div>
.search {
    width: 123px;
    height: 100%;
    padding: 0 13px;
    background-color: red;
}
.txt_change {
    width: 92px;
    height: 100%;
    display: inline-block;
    position: relative;
}
.txt_change_bottom {
    position: absolute;
}
.txt_change_bottom em {
    z-index: 1;
    display: block;
    height: 64px;
    width: 92px;
    background-color: white;
    animation: move 4s steps(3) infinite;
}
@keyframes move {
    0% {

    }
    100% {
        transform: translateY(-192px);
    }
}

.search i::after {
    content: '';
    font-family: 'icomoon';
}

img


应该是其他地方影响了,复制你的代码不存在你说的情况

.txt_change_bottom 加个top : 0 就顶头了

span替换em。斜体效果用样式调整