我在背景中找到了其他文本示例，但未设置动画。 I want it to be positioned like this.
这就是我正在使用的。 https://jsfiddle.net/3esj55rb
.marquee {
color: #333;
padding-left: 1.5em;
position: relative;
font: 50px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
width: 450px;
margin: 2em auto
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 25s linear infinite;
}
.marquee:hover {
color: #F65314;
animation-play-state: paused
}
@keyframes marquee {
0% {
text-indent: 27.5em
}
100% {
text-indent: -105em
}
}
/* Make it pretty */
.microsoft {
padding-left: 1.5em;
position: relative;
font: 50px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
/* ::before was :before before ::before was ::before - kthx */
.microsoft:before,
.microsoft::before {
z-index: 2;
content: '';
position: absolute;
top: -1em;
left: -1em;
width: .5em;
height: .5em;
box-shadow: 1.0em 1.25em 0 #F65314, 1.6em 1.25em 0 #7CBB00, 1.0em 1.85em 0 #00A1F1, 1.6em 1.85em 0 #FFBB00;
}
.microsoft:after,
.microsoft::after {
z-index: 1;
content: '';
position: absolute;
top: 0;
left: 0;
width: 2em;
height: 2em;
background-image: linear-gradient(90deg, white 70%, rgba(255, 255, 255, 0));
}
/* Style the links */
.vanity {
color: #333;
text-align: left;
font: 20px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.vanity a,
.microsoft a {
color: #1570A6;
transition: color .5s;
text-decoration: none;
}
.vanity a:hover,
.microsoft a:hover {
color: #F65314;
}
.text {
color: #333;
text-align: left;
font: 20px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.topText {
color: #333;
text-align: left;
font: 20px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
margin-top: 70px;
}<p class="topText">
Boston, city, capital of the commonwealth of Massachusetts,
and seat of Suffolk county, in the northeastern United States.
It lies on Massachusetts Bay, an arm of the Atlantic Ocean.
The city proper has an unusually small area for a major city,
and more than one-fourth of the total—including part of the
Charles River, Boston Harbor, and a portion of the Atlantic—is water.
Area city, 46 square miles (119 square km).
</p>
<p class="marquee"> Visit Boston. This text should be in the background</p>
<p class="text">
The area, the people, and the institutions within its political
boundaries can only begin to define the essence of Boston. Its
nickname “Beantown” has its origin in colonial times, when Boston,
as a stop on a major trade route with the West Indies, had a steady
supply of molasses from the Caribbean, thus leading to the creation
of a popular dish that became known as Boston baked beans (beans
baked in molasses).
</p>
<p class="vanity">
Follow us on twitter
<a href="https://twitter.com/boston">@boston</a> to know more.
</p>
<p class="vanity">
Test test
<a href="boston.gov">click here for website</a> or our state's <a href="mass.gov"> mass.gov </a>
</p>
答案 0 :(得分：0)
添加了z索引并确定了相对于容器的位置。
.marquee {
color: #333;
padding-left: 1.5em;
font: 50px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
margin: 2em auto
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 10s linear infinite;
z-index: -1;
position: fixed;
width: 450px;
top: 15%;
}
答案 1 :(得分：0)
使用CSS可以定义@keyframes，以便可以创建对象的不同位置，大小，角度和属性。
供您参考：
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
在这里您可以找到资源：https://css-tricks.com/css-techniques-and-effects-for-knockout-text/
答案 2 :(得分：-1)
您必须使用位置（相对/绝对和顶部）进行游戏。当心孩子点餐。另外，当您需要在悬停时停止动画时，请确保将:hover侦听器放置在正确的标签上。
为了发挥位置的作用，我想出了一个解决方案。但是，此解决方案需要重复文本。
想法如下：
container将包含三个孩子container的高度position: absolute，它必须通过子容器垂直对齐其内容。我扩展了原始文本，以确保选框正确垂直对齐。
.marquee__content中放置任何内容，不仅可以放置p，还可以放置一些h2或h3或某些图片，它们都应该滑动。 .marquee *{...}样式可确保所有子级都不会换行最后的代码：
/* ========== Container ========== */
/* cosmetic only */
body {
background-color: #cacaca;
}
.container {
/* Required for playing with positions ! */
position: relative;
/* irrelevant: cosmetic only */
width: 60%;
margin: auto;
background: white;
}
/* ========== Text =============== */
/* define all text size so that height fixer can
have the appropriate height */
.text {
/* to ensure both box__text have same height */
font-size: 20px;
/* cosmetic only */
padding: 1rem;
box-sizing: border-box;
}
/* this hack requires an invisible box__text to set
parent div height */
.text--height-fixer {
visibility: hidden;
}
.text--shown {
position: absolute;
/* move to top of parent */
top: 0;
/* take parent width / height */
width: 100%;
height: 100%;
}
/* ========== Marquee ============ */
.marquee {
position: absolute;
/* move to top of parent */
top: 0;
/* take parent width / height */
width: 100%;
height: 100%;
/* hide x overflow for the slide effect */
overflow-x: hidden;
/* vertically align content. I chose display: flex as
I am lazy but this is not the core of the question */
display: flex;
/* cosmetic only */
padding: 1rem;
box-sizing: border-box;
opacity: 0.6;
}
/* force one line layout for all children, not only <p> */
.marquee * {
/* remove line break */
white-space: nowrap;
/* remove all default margin */
margin: auto;
}
/* to match the provided picture */
.marquee .boston {
color: lightblue;
font-size: 4rem;
font-weight: 800;
transition: color 0.2s;
}
@keyframes marquee {
0% {
margin-left: 100%;
}
100% {
margin-left: -100%;
}
}
.marquee__content {
animation: marquee 10s linear infinite;
}
/* this is the tricky part: the "hover" event should not be listened
on marquee but on the container */
.container:hover .marquee__content {
animation-play-state: paused;
}
.container:hover .marquee .boston {
color: orange;
}<!-- container to manage all positions. Children order matters !-->
<div class="container">
<!-- relative must be first -->
<div class="text text--height-fixer">
<p>
The area, the people, and the institutions within its political boundaries can only begin to define the essence of Boston. Its nickname “Beantown” has its origin in colonial times, when Boston, as a stop on a major trade route with the West Indies, had
a steady supply of molasses from the Caribbean, thus leading to the creation of a popular dish that became known as Boston baked beans (beans baked in molasses). The area, the people, and the institutions within its political boundaries can only
begin to define the essence of Boston. Its nickname “Beantown” has its origin in colonial times, when Boston, as a stop on a major trade route with the West Indies, had a steady supply of molasses from the Caribbean, thus leading to the creation
of a popular dish that became known as Boston baked beans (beans baked in molasses).
</p>
</div>
<!-- marquee should be declared before text so that it appears below without z-index -->
<div class="marquee">
<div class="marquee__content">
<p class="boston">
Visit Boston. This text should be in the background
</p>
</div>
</div>
<div class="text text--shown">
<p>
The area, the people, and the institutions within its political boundaries can only begin to define the essence of Boston. Its nickname “Beantown” has its origin in colonial times, when Boston, as a stop on a major trade route with the West Indies, had
a steady supply of molasses from the Caribbean, thus leading to the creation of a popular dish that became known as Boston baked beans (beans baked in molasses). The area, the people, and the institutions within its political boundaries can only
begin to define the essence of Boston. Its nickname “Beantown” has its origin in colonial times, when Boston, as a stop on a major trade route with the West Indies, had a steady supply of molasses from the Caribbean, thus leading to the creation
of a popular dish that became known as Boston baked beans (beans baked in molasses).
</p>
</div>
</div>
如果有人有更好的解决方案，允许任何字幕内容（不限于单个p），请随时共享！