HTML 跑马灯飞过背景视频

Question

我正在尝试创建一个飞过背景视频的选取框。然而，选取框只在视频播放器的左边距飞行。这是我的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="StyleSheet.css"/>
</head>
<body>
<div class="row">
    <div id="container" class="col-md-6">
        <iframe width="100%" height="315" src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
        </iframe>

        <div class="flier">
            <marquee>yay 1st comment</marquee>
        </div>
    </div>
</div>
</body>
</html>

我的样式表

* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;

}

#container video {
    position: relative;
    z-index: 0;
}

.flier {
    color: white;
    position: absolute;
    margin-top: 20px;
    top: 0;
    z-index: 1;
}

#container p {
    color: white;
}

希望文字能从视频容器的右端飞到左端。然而，选框仅在左端飞行。

Answer 1

marquee 标签自 2008 年以来已被弃用。因此大多数现代浏览器（Internet Explorer 除外）不正式支持它 [Source]。这使得它不太可能足够可靠地处理任何 public 面临的问题，因为您永远不能假设您的访问者将拥有能够正确显示它的浏览器，或者实际上它是否会显示。

你现在应该使用CSS3来实现效果。

我找到了一个简单的例子，在jsfiddle我将包含下面的代码

HTML

<p class="marquee">Your text</p>

CSS

/* Make it a marquee */
.marquee {
    width: 450px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 50s linear infinite;
}

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

/* Make it move */
@keyframes marquee {
    0%   { text-indent: 27.5em }
    100% { text-indent: -105em }
}

您应该能够修改它以满足您的需要，试一试，如果您需要进一步的帮助，请修改您的问题或使用您的新代码提出新问题。

HTML 跑马灯飞过背景视频

HTML marquee fly over background video

html

css

video

marquee