2017-11-11 14 views
1

だから私は、「)(ステップ」関数を作るために私のWebページ上のアニメーションの仕事をしようとしてきたが、私はエラーにCSS予期しない文字「手順」

「予期しない文字(複数可)、」得続けますステップが見つかりました

私はGoogleを検索しましたが、これについて議論するページはありませんでした。

私が続くサイトでは、あなたがCSSで間違った選択を与えている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

mainを親内のテキストのためのdiv class="tagline"と呼ばれているよう

.main .taglineであるべき。エラーはどこに表示されますか?プリプロセッサを使用していますか? – agrm

+0

私はプリプロセッサを使用していません。 リンクされたウェブサイトはこれを次のように書いています。 1)オートプレフィクサー –

答えて

0

です。あなたは予想通りCSS自体が作品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

oohの使用を前提としています。それを変更しました。ありがとう。 –

+0

しかし、予期しないエラーを解決しませんでした。 –

+0

答えを更新して、イメージではなく.textだけを選択してください。@KoungMyatHein – dippas

関連する問題