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

自2008年以来，marquee标签已被弃用。因此，大多数现代浏览器（Internet Explorer都是例外）[Source]并未正式支持。这使得它不可能足够可靠地用于任何公共场合，因为你永远不能假设你的访问者将有一个能够正确显示它的浏览器，或者实际上它甚至可以显示它。

你应该使用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大门罩飞过背景视频

1 个答案: