1. 首頁
  2. 問答
  3. 輸入文字裏面的CSS動畫？

輸入文字裏面的CSS動畫？

2016-07-07 70 views
1

我想要實現的是在輸入文本中有一個選取框，就像打擊一樣;輸入文字裏面的CSS動畫？

<input type="text" class="form-control" value="<marquee>Hi</marquee>" disabled></input>

我已標記這是JavaScript的，因爲我不認爲這是可能的只是普通的HTML，我可能是錯誤的但是。

編輯 - 也許來代替過時的<marquee>標籤，我可以使用CSS動畫，而不是字幕的創建在輸入文本滾動。

來源

2016-07-07 Lewis Day

+0

第一，''標籤沒有關閉''。其次，試圖將''作爲HTML插入是無效的。第三，它沒有幫助，沒有像''這樣的東西，但這是另一回事。 – Rob

+0

我不認爲所有的現代瀏覽器甚至都支持自己的字幕。你可以使用CSS動畫來達到同樣的效果。 –

+1

是否有一個前面的問題概述瞭如何用CSS動畫實現這一點？或者是否有人願意分享如何用另一種方法實現這一目標？ –

回答

2

CSS動畫可以模仿該功能。

@-webkit-keyframes marquee { 
 
    0% {text-indent:100%;} 
 
    100% {text-indent:-10%} 
 
} 
 

 
input.marquee { 
 
    -webkit-animation: marquee 5s infinite; 
 
    -webkit-animation-timing-function: linear; 
 
    }
<input type="text" class="form-control marquee" value="Hi" disabled ></input> 
 

 
<marquee>Hi</marquee>

來源

2016-07-07 01:18:15 Malk

+1

Thankyou @malk這正是我想要實現的真正感謝 –

+0

請注意，對於結束標記，不存在「」這樣的事物。 https://developers.whatwg.org/the-input-element.html#the-input-element，再次，沒有這樣的東西作爲''元素（但這是另一回事）。 – Rob

+0

我愛你的男人！ – Rahnzo

1

什麼你可以用JS做到這一點：改變輸入的值，它看起來像它的運動...

var marquu = document.getElementById('marquu'); 
 
var valLength = marquu.value.length; 
 
var padding = 70; 
 
var step = 0; 
 
var originalString = marquu.value 
 
var interval = setInterval(function() { 
 
    if (step++ == 0) marquu.value = originalString; 
 
    marquu.value = (valLength >= step) ? originalString.substr(valLength - step, valLength) : " " + marquu.value; 
 
    
 
    if (step == padding) step = 0; 
 
}, 100);
<input id="marquu" type="text" value="Some String" disabled />

來源

2016-07-07 01:35:05 webdeb

相關問題

 相關問題