2017-11-11 111 views
1

所以我一直試圖使功能「的步驟()」工作在我的網頁動畫,但我不斷收到錯誤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>

+0

本身工作正常的CSS。錯誤顯示在哪裏?你在使用預處理器嗎? – agrm

+0

我沒有使用任何預處理器。 然而,鏈接的網站注意到這一點: 1)假定使用Autoprefixer –

回答

0

你給在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>

+0

哦,我明白了。改變了它。謝謝。 –

+0

雖然沒有解決意外的錯誤。 –

+0

更新了答案,只選擇.text而不是圖片@KoungMyatHein – dippas