2017-04-23 4 views
0

exampleのように、ユーザーの画面に表示される移動テキストを実装するために使用できるプログラミング言語は何ですか。誰かが私にこれを行う方法についての私の理解を深め、基本的な開始テンプレートを得るために見ることができるチュートリアルを私にお勧めできますか?私のウェブサイトにこれを実装するためにどのようなプログラミング言語を使用できますか?

最近私はhtml、css &ブートストラップの使い方を知っています。

+0

JavaScriptを。 – Siguza

+0

また、jQueryも同様です –

答えて

2

css3 animationsを使用すると、以下のようにすることができます。

body{ 
 
    background: #000; 
 
    padding-top: 10px; 
 
} 
 

 
p{ 
 
    color: lime; 
 
    font-family: "Courier"; 
 
    font-size: 20px; 
 
    margin: 10px 0 0 10px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    width: 30em; 
 
    animation: type 4s steps(60, end); 
 
} 
 

 
p:nth-child(2){ 
 
    animation: type2 8s steps(60, end); 
 
} 
 

 
p a{ 
 
    color: lime; 
 
    text-decoration: none; 
 
} 
 

 
span{ 
 
    animation: blink 1s infinite; 
 
} 
 

 
@keyframes type{ 
 
    from { width: 0; } 
 
} 
 

 
@keyframes type2{ 
 
    0%{width: 0;} 
 
    50%{width: 0;} 
 
    100%{ width: 100; } 
 
} 
 

 
@keyframes blink{ 
 
    to{opacity: .0;} 
 
} 
 

 
::selection{ 
 
    background: black; 
 
}
<p>hi folks, this is typing animation using CSS</p> 
 
<p>created with ♥ 
 
:)<span>|</span></p>

出典:https://codepen.io/rusjames/pen/uAFhE

関連する問題