Question

我有以下HTML：

                <div id="square" class="zoomInUp animated"> <p class="header-name">Theo Bearman</p> 
            <p class="header-title">Interests in <span class="rw-words rw-words-1">
                    <span>Web Designer</span>
                    <span>Web Developer</span>
                    <span>Graphic Designer</span>
                </span></p></div>

以下CSS：

/* Animated words ------------------------------------------------- */

.rw-words{
text-indent: 10px;
font-size: 16px;
font-weight: 100;
text-align: center
}
.rw-words-1 span{
position: absolute;
opacity: 0;
overflow: hidden;
-webkit-animation: rotateWord 9s linear infinite 0s;
-ms-animation: rotateWord 9s linear infinite 0s;
animation: rotateWord 9s linear infinite 0s;
text-align: center
}
.rw-words-1 span:nth-child(2) { 
-webkit-animation-delay: 3s; 
-ms-animation-delay: 3s; 
animation-delay: 3s; 
}
.rw-words-1 span:nth-child(3) { 
-webkit-animation-delay: 6s; 
-ms-animation-delay: 6s; 
animation-delay: 6s; 
}

@-webkit-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px);}
25% { opacity: 1; -webkit-transform: translateY(0px); }
40% { opacity: 0; -webkit-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -ms-transform: translateY(-30px); }
5% { opacity: 1; -ms-transform: translateY(0px);}
25% { opacity: 1; -ms-transform: translateY(0px); }
40% { opacity: 0; -ms-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); transform:        translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
25% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
40% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@media screen and (max-width: 768px){
.rw-sentence { font-size: 18px; }
}
@media screen and (max-width: 320px){
.rw-sentence { font-size: 9px; }
}

.header-name2 {
background-color: #000;
padding: 5px 17px;
display: inline-block;
color: #fff;
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-left: 3px solid #f00;
border-right: 3px solid #0045ff;
}
.header-title {
font-size: 16px;
font-weight: 100;

}

我需要做些什么来更改我的代码，以便标题标题位于header-name2下面，并且包含滚动字？

一个实例是here。你可以看到文本＆＃34;兴趣在＆＃34;是居中但滚动的单词不是。

提前致谢！

Answer 1

你可以这样做：

.rw-words{
  ....
  display: block;
  position: relative;
}
.rw-words-1 span{
  left:25%;
  right: 25%;
}

并从.rw-words

中删除text-indent

Answer 2

您可以提供.header-title { margin-left: -110px; }

Answer 3

  <div class="rw-words rw-words-1">
                <div id = 'cont'></div>
                <div>Web Designer</div>
                <div>Web Developer</div>
                <div>Graphic Designer</div>
            </div>

在那里放一个空白容器div

#cont {
     position:relative;
     width: 10em;
}

问题是绝对的位置不占用任何空间＆＃34; 因此不以中心计算。

居中滚动文本

3 个答案: