CSS3選取框效果

我使用CSS3動畫創建選取框效果。這是我的代碼。CSS3選取框效果

HTML標籤：

<div id="caption"> 
    The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. 
</div>

CSS：

#caption 
{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    font-size: 20px; 
    line-height: 30px; 
    height:30px; 
    width: 100%; 
    white-space: nowrap; 
    -moz-animation: caption 50s linear 0s infinite; 
    -webkit-animation: caption 50s linear 0s infinite; 
} 
@-moz-keyframes caption { 0% { margin-left:120%; } 100% { margin-left:-4200px; } } 
@-webkit-keyframes caption { 0% { margin-left:120%; } 100% { margin-left:-4200px; } }

現在我可以得到基本的字幕效果，但這些代碼並不明智不夠。

我不知道是否有辦法避免使用像margin-left:-4200px;這樣的特定值，以便它可以適應任何長度的文本。

此外，它在Firefox和Safari中執行得並不順利，在Chrome中表現良好。

這是一個類似的演示：http://jsfiddle.net/jonathansampson/XxUXD/，它使用text-indent但仍具有特定的值。

任何意見將不勝感激。

Fred

來源

2014-01-20 Fred Wu

隨着標記的小的變化，這是我的做法（我剛剛插入的段落裏面span）：

例小提琴：http://jsfiddle.net/MaY5A/1/（僅包括調試目的邊界，在Firefox測試和鉻）

標記

<p class="microsoft marquee"><span>Windows 8 and ...</span></p>

個CSS

.marquee { 
    width: 450px; 
    margin: 0 auto; 
    white-space: nowrap; 
    overflow: hidden; 
    box-sizing: border-box; 
} 

.marquee span { 
    display: inline-block; 
    padding-left: 100%; /* show the marquee just outside the paragraph */ 
    animation: marquee 15s linear infinite; 
} 

.marquee span:hover { 
    animation-play-state: paused 
} 

/* Make it move */ 
@keyframes marquee { 
    0% { transform: translate(0, 0); } 
    100% { transform: translate(-100%, 0); } 
}

沒有硬編碼依賴於段寬度—值—已經插入

動畫應用CSS3 transform屬性（在需要的地方使用的前綴），所以它表現良好。

如果您需要在開始處插入延遲一次，那麼還要設置一個animation-delay。如果您需要而不是在插入一個小的延遲每環路然後嘗試用更高padding-left（例如150%）

來源

2014-01-20 12:02:07 fcalderan

+1翻譯可能是最乾淨的解決方案！ – Christoph

正是我想要的，那會更加靈活，非常感謝你。 –

當我在我的網站上嘗試時，這並不適用於我。我發現有一個需要的外部資源[prefixfree.js]（http://leaverou.github.io/prefixfree/prefixfree.js）。我應該注意到（1）在jsfiddle頁面的外部資源旁邊。對於那些沒有去那裏複製上述文本的人，您還需要前綴自由的JavaScript文件。 – Recognizer

以下應該做你想做的。

@keyframes marquee { 
    from { text-indent: 100% } 
    to { text-indent: -100% } 
}

來源

2014-01-20 11:48:02

不工作，嘗試在該示例小提琴。 – Christoph

適用於Safari，Chrome和Firefox。 http://jsfiddle.net/XxUXD/711/ –

不，它沒有，因爲父寬度被認爲是這樣的：讓它滾動到最後，並看到文本消失之前，它是完全看不見的滾動：http： //jsfiddle.net/XxUXD/712/ – Christoph

-2

玩，我認爲你應該去一些JavaScript文字滑塊，做工精細與所有的瀏覽器。我喜歡這一個，你可以用同樣的做更多的東西：

http://jscroller2.markusbordihn.de/example/endless/

來源

2014-01-20 12:05:08

如果可能，應該在CSS中定義頁面的外觀。在這種情況下，這是可能的，因此出於性能原因強烈建議不要使用Javascript。 –

無法聯繫此網站 –

此答案無效 – HDJEMAI

CSS3選取框效果

回答

相關問題