Question

我正在尝试使用纯css3（NO Javascript）创建简单的文本轮播。在少数参考文献的帮助下;我设法编写了下面提到的代码：

<!DOCTYPE html>
<html>
<head>
<style>
#carousel p:nth-child(1) {
    opacity: 1.0;
    -webkit-transform: translateX(87px);
    -moz-transform: translateX(87px);
    -ms-transform: translateX(87px);
    -o-transform: translateX(87px);
    transform: translateX(87px);
    animation:carousel1 10s infinite;
    -webkit-animation:carousel1 10s infinite; /* Safari and Chrome */
}

#carousel p:nth-child(2) {
    opacity: 0.0;
    animation:carousel2 10s infinite;
    -webkit-animation:carousel2 10s infinite; /* Safari and Chrome */
}

#carousel p:nth-child(3) {
    opacity: 0.0;
    -webkit-transform: translateX(-87px);
    -moz-transform: translateX(-87px);
    -ms-transform: translateX(-87px);
    -o-transform: translateX(-87px);
    transform: translateX(-87px);
    animation:carousel3 10s infinite;
    -webkit-animation:carousel3 10s infinite; /* Safari and Chrome */
}

@keyframes carousel1 {
    0%, 100% {opacity: 1.0;}
    33% {opacity: 0.0;}
    66% {opacity: 0.0;}
}

@-webkit-keyframes carousel1 {
    0%, 100% {opacity: 1.0;}
    33% {opacity: 0.0;}
    66% {opacity: 0.0;}
}

@keyframes carousel2 {
    0%, 100% {opacity: 0.0;}
    33% {opacity: 1.0;}
    66% {opacity: 0.0;}
}

@-webkit-keyframes carousel2 {
    0%, 100% {opacity: 0.0;}
    33% {opacity: 1.0;}
    66% {opacity: 0.0;}
}

@keyframes carousel3 {
    0%, 100% {opacity: 0.0;}
    33% {opacity: 0.0;}
    66% {opacity: 1.0;}
}

@-webkit-keyframes carousel3 {
    0%, 100% {opacity: 0.0;}
    33% {opacity: 0.0;}
    66% {opacity: 1.0;}
}
</style>
</head>
<body>
   <div id="carousel">
   <P> One is here </p>
   <P> Two is here </p>
   <P> Three is here </p>
   </div>
</body>
</html>

在此代码中，文字错误对齐;你能帮忙解决一下吗？ Carosuel;必须是无限的，文本应该在中间。

Answer 1

请试试这个：

<!DOCTYPE html>
<html>
<head>
<style>
#carousel p { text-align: center; position: relative; }

#carousel p:nth-child(1) {    
opacity: 1.0;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
animation:carousel1 10s infinite;
-webkit-animation:carousel1 10s infinite; /* Safari and Chrome */
}

#carousel p:nth-child(2) {
opacity: 0.0;
animation:carousel2 10s infinite;
-webkit-animation:carousel2 10s infinite; /* Safari and Chrome */
}

#carousel p:nth-child(3) {
opacity: 0.0;
animation:carousel3 10s infinite;
-webkit-animation:carousel3 10s infinite; /* Safari and Chrome */
}

@keyframes carousel1 {
0%, 100% {opacity: 1.0;}
33% {opacity: 0.0;}
66% {opacity: 0.0;}
}

@-webkit-keyframes carousel1 {
0%, 100% {opacity: 1.0;}
33% {opacity: 0.0;}
66% {opacity: 0.0;}
}

@keyframes carousel2 {
0%, 100% {opacity: 0.0;}
33% {opacity: 1.0;}
66% {opacity: 0.0;}
}

@-webkit-keyframes carousel2 {
0%, 100% {opacity: 0.0;}
33% {opacity: 1.0;}
66% {opacity: 0.0;}
}

@keyframes carousel3 {
0%, 100% {opacity: 0.0;}
33% {opacity: 0.0;}
66% {opacity: 1.0;}
}

@-webkit-keyframes carousel3 {
0%, 100% {opacity: 0.0;}
33% {opacity: 0.0;}
66% {opacity: 1.0;}
}
</style>
</head>
<body>
<div id="carousel">
<p> One is here </p>
<p> Two is here </p>
<p> Three is here </p>
</div>
</body>
</html>

这个小提琴将起作用：http://jsfiddle.net/6zZra/

更新： http://jsfiddle.net/rajmathan/Uq4Jk/

如何在旋转木马中居中对齐文本？

1 个答案: