CSS意外的字符“步骤”

所以我一直试图使功能“的步骤（）”工作在我的网页动画，但我不断收到错误CSS意外的字符“步骤”

“意外的字符（S）”步骤“找到”

我已经搜索谷歌，但没有网页讨论这一点。

我跟着该网站是this

.container.main.tagline { 
 
    overflow: hidden; 
 
    /* Ensures the content is not revealed until the animation */ 
 
    border-right: .15em solid orange; 
 
    /* The typwriter cursor */ 
 
    white-space: nowrap; 
 
    /* Keeps the content on a single line */ 
 
    margin: 0 auto; 
 
    /* Gives that scrolling effect as the typing happens */ 
 
    letter-spacing: .15em; 
 
    /* Adjust as needed */ 
 
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; 
 
} 
 

 

 
/* The typing effect */ 
 

 
@keyframes typing { 
 
    from { 
 
    width: 0 
 
    } 
 
    to { 
 
    width: 100% 
 
    } 
 
} 
 

 

 
/* The typewriter cursor effect */ 
 

 
@keyframes blink-caret { 
 
    from, 
 
    to { 
 
    border-color: transparent 
 
    } 
 
    50% { 
 
    border-color: orange; 
 
    } 
 
}

<body> 
 
    <div class="main"> 
 
    <img src="wall1.jpg" alt="main image"> 
 
    <div class="tagline">See beyond the big picture.</div> 
 
    </div> 
 
</body>

来源

2017-11-11 Koung Myat Hein

本身工作正常的CSS。错误显示在哪里？你在使用预处理器吗？ – agrm

我没有使用任何预处理器。然而，链接的网站注意到这一点： 1）假定使用Autoprefixer –

你给在CSS错误的选择。

只应.main .tagline你有div class="tagline"一个名为main父母中的文本在HTML

.main .tagline { 
 
    overflow: hidden; 
 
    /* Ensures the content is not revealed until the animation */ 
 
    border-right: .15em solid orange; 
 
    /* The typwriter cursor */ 
 
    white-space: nowrap; 
 
    /* Keeps the content on a single line */ 
 
    margin: 0 auto; 
 
    /* Gives that scrolling effect as the typing happens */ 
 
    letter-spacing: .15em; 
 
    /* Adjust as needed */ 
 
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; 
 
} 
 

 

 
/* The typing effect */ 
 

 
@keyframes typing { 
 
    from { 
 
    width: 0 
 
    } 
 
    to { 
 
    width: 100% 
 
    } 
 
} 
 

 

 
/* The typewriter cursor effect */ 
 

 
@keyframes blink-caret { 
 
    from, 
 
    to { 
 
    border-color: transparent 
 
    } 
 
    50% { 
 
    border-color: orange; 
 
    } 
 
}

<body> 
 
    <div class="main"> 
 
    <img src="wall1.jpg" alt="main image"> 
 
    <div class="tagline">See beyond the big picture.</div> 
 
    </div> 
 
</body>

来源

2017-11-11 10:32:53 dippas

哦，我明白了。改变了它。谢谢。 –

虽然没有解决意外的错误。 –

更新了答案，只选择.text而不是图片@KoungMyatHein – dippas

CSS意外的字符“步骤”

回答

相关问题