1. 首页
  2. 问答
  3. 输入文字里面的CSS动画？

输入文字里面的CSS动画？

2016-07-07 41 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

相关问题

 相关问题