動畫文字填充從左到右

我想動畫用CSS填充文字。文本應該從左到右填充顏色。動畫文字填充從左到右

這是我的CSS：

.box-with-text { 
    background-image: -webkit-linear-gradient(right, crimson 50%, white 50%); 
    background-repeat: repeat; 
    background-position: 0 0; 
    background-size: 200% 100%; 
    -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text; 
    -webkit-animation: stripes normal forwards ease-in-out; 
    animation: stripes 2s normal forwards ease-in-out; 
}

現在只有第一個字母的顏色填充。

here is the fiddle

來源

2016-06-21 Rubocop

這很難說你所要求的模糊描述與那個小提琴配對。你提供的演示有什麼問題？小提琴和你的目標有什麼不同？那裏有什麼限制？如果你只是想從左到右有紅色的「成長」，那麼你就在正確的軌道上。看看代碼，看看你可以做些什麼來使紅色增加，而不是使用'translate'（滑動） – MassDebates

你很接近。嘗試使用設置進行播放。通過調整背景位置，大小和動畫持續時間，我獲得了許多不同的效果。 –

https://jsfiddle.net/xta0x9w9/2/ – DaniP

你也可以看看柔性（爲中心的東西）和mix-blend-mode，所以可以avalaible也爲Firefox：

.box-with-text { 
 
    text-transform: uppercase; 
 
    font: bold 26vmax/.8 Open Sans, Impact; 
 
    background: black; 
 
    display: table; 
 
    color: white; 
 
    mix-blend-mode: multiply 
 
} 
 

 
@-webkit-keyframes stripes { 
 
    to { 
 
    background-size:100% 100%; 
 
    } 
 
} 
 

 
@keyframes stripes { 
 
    to { 
 
    background-size:100% 100%; 
 
    } 
 
} 
 

 
html { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-align:center; 
 
    -webkit-align-items:center; 
 
     -ms-flex-align:center; 
 
      align-items:center; 
 
    height: 100%; 
 
    background: black; 
 
} 
 

 
body { 
 
    margin: auto; 
 
    background: -webkit-linear-gradient(crimson , crimson) turquoise no-repeat 0 0; 
 
    background: linear-gradient(crimson , crimson) turquoise no-repeat 0 0; 
 
    background-size: 0 100%; 
 
    -webkit-animation: stripes 2s linear infinite; 
 
      animation: stripes 2s linear infinite; 
 
}

<div class="box-with-text"> 
 
    Text 
 
</div>

http://codepen.io/gc-nomade/pen/XKNKzd

來源

2016-06-21 19:00:56

這看起來不錯。如何用白色文字填充？ – Rubocop

@Rubocop你的意思是白色的crismon？你需要添加一個背景顏色前http://codepen.io/gc-nomade/pen/YWpWmj白色，但可以是任何其他顏色，甚至另一個漸變http://codepen.io/gc-nomade/pen/EyNgYv –

你能幫助我嗎？這是如何在.box-with-text中使用透明背景的？ http://codepen.io/rubocop/pen/KMNgQa – Rubocop

/* Main styles */ 
 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800); 
 

 
.box-with-text { 
 
    background-image: -webkit-linear-gradient(left, crimson 50%, white 50%); 
 
    background-repeat: repeat; 
 
    background-position: 0 0; 
 
    background-size: 100% 200px; 
 
    -webkit-text-fill-color: transparent; 
 
    -webkit-background-clip: text; 
 
    -webkit-animation: stripes 2s linear infinite; 
 
    animation: stripes 2s linear infinite; 
 
} 
 

 
@-webkit-keyframes stripes { 
 
    100% { 
 
    background-position: 0 -50px; 
 
    } 
 
} 
 

 
@keyframes stripes { 
 
    100% { 
 
    background-position: 385px 0; 
 
    } 
 
} 
 
/* Other stuff */ 
 
body { 
 
    overflow: hidden; 
 
    background: #000; 
 
    color: #FFF; 
 
} 
 

 
.box-with-text { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    white-space: nowrap; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font: bold 26vmax/.8 Open Sans, Impact; 
 
    -webkit-transform: translateX(-50%) translateY(-50%); 
 
    -ms-transform: translateX(-50%) translateY(-50%); 
 
    transform: translateX(-50%) translateY(-50%); 
 
}

<div class="box-with-text"> 
 
    Text 
 
</div>

在這種情況下，你應該改變

@keyframes stripes { 
    100% { 
    background-position: 385px 0; 
    } 
}

位置取決於文本的寬度;

來源

2016-06-21 18:54:23

動畫文字填充從左到右

回答

相關問題