色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

html 文字 動畫效果代碼大全

江奕云1年前10瀏覽0評論

HTML是網頁開發中必不可少的一部分,其中文字動畫效果更是讓網頁更加生動活潑。下面是一些常見的文字動畫效果的HTML代碼。

/* 1. 文字下落效果 */
<style>
.falling-text 
{
position: relative;
animation: fall 2s linear forwards;
}
@keyframes fall 
{
0% 
{
top: -100px;
opacity: 1;
}
100% 
{
top: 50%;
opacity: 0;
}
}
</style>
<div class="falling-text">這是一段文字</div>
/* 2. 打字機效果 */
<style>
.typewriter-text 
{
overflow: hidden;  
border-right: .15em solid orange; 
white-space: nowrap; 
margin: 0 auto; 
letter-spacing: .15em; 
animation: 
typing 3.5s steps(30, end),
blink-caret .75s step-end infinite;
}
@keyframes typing 
{
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret 
{
from, to { border-color: transparent }
50% { border-color: orange }
}
</style>
<div class="typewriter-text">這是一段文字</div>
/* 3. 文字漸顯效果 */
<style>
.fade-in-text 
{
opacity: 0;
animation: fadeIn 3s ease-in-out forwards;
}
@keyframes fadeIn 
{
0%
{
opacity: 0;
}
100% 
{
opacity: 1;
}
}
</style>
<div class="fade-in-text">這是一段文字</div>