Question

这是CSS3和转盘的HTML

#slider {
    height:150px;
    position:absolute;
    clip:rect(0px,900px,140px,0px);
    overflow:hidden;
}
#insideSlider{
    animation: move1 20s ease 2s infinite   ; 
   -moz-animation: move1 20s ease 2s infinite  ; 
   -webkit-animation: move1 20s ease 2s infinite  ; 
}
#insideSlider:hover {
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -animation-play-state:paused;
}


@keyframes move1 {
0% {transform:translateX(0px);}
10% {transform:translateX(-155px);}
20% {transform:translateX(-310px);}
30% {transform:translateX(-465px);}
40% {transform:translateX(-620px);}
50% {transform:translateX(-775px);}
60% {transform:translateX(-930px);}
70% {transform:translateX(-1085px);}
80% {transform:translateX(-1240px);}
90% {transform:translateX(-1395px);}
100% {-webkit-transform:translateX(0px);}
} 

@-webkit-keyframes move1 {
0% {-webkit-transform:translateX(0px);}
10% {-webkit-transform:translateX(-155px);}
20% {-webkit-transform:translateX(-310px);}
30% {-webkit-transform:translateX(-465px);}
40% {-webkit-transform:translateX(-620px);}
50% {-webkit-transform:translateX(-775px);}
60% {-webkit-transform:translateX(-930px);}
70% {-webkit-transform:translateX(-1085px);}
80% {-webkit-transform:translateX(-1240px);}
90% {-webkit-transform:translateX(-1395px);}
100% {-webkit-transform:translateX(0px);}
}  
@-moz-keyframes move1 {
0% {-moz-transform:translateX(0px);}
10% {-moz-transform:translateX(-155px);}
20% {-moz-transform:translateX(-310px);}
30% {-moz-transform:translateX(-465px);}
40% {-moz-transform:translateX(-620px);}
50% {-moz-transform:translateX(-775px);}
60% {-moz-transform:translateX(-930px);}
70% {-moz-transform:translateX(-1085px);}
80% {-moz-transform:translateX(-1240px);}
90% {-moz-transform:translateX(-1395px);}
100% {-webkit-transform:translateX(0px);}
}  


.vignette {
    display:inline-block;
    width:130px;
    margin:10px;
}

.imageVignette {
    border:1px solid #CCC;
    position:relative;
}

.imageVignette:hover {
    -webkit-transform:scale(1.2,1.2);
    transition:0.3s;
}

.vignette:hover .description{
    bottom:10px;
    transition:0.3s;
}


.description {
    position:absolute;
    bottom:-20px;
    display:block;  
    width:130px;
    height:30px;
    transition:0.3s;
}



.description .detail {
    font-size:12px;
    position:absolute;bottom:0px;
    height:25px;
    text-align:center;
    background-color:#CCC;
    width:100%;
    text-shadow: 1px 1px 2px #AAA;
}

和HTML

<div id="slider">
    <div id="insideSlider">

            <div class="vignette">
                <img  class="imageVignette" src="http://placehold.it/128x128"  />
                <div class="description">
                    <div class="detail">
                        <a href="#">hello1</a>
                    </div>
                </div>
            </div>

            <div class="vignette">
                <img  class="imageVignette" src="http://placehold.it/128x128"  />
                <div class="description">
                    <div class="detail">
                        <a href="#">hello1</a>
                    </div>
                </div>
            </div>

            <div class="vignette">
                <img  class="imageVignette" src="http://placehold.it/128x128"  />
                <div class="description">
                    <div class="detail">
                        <a href="#">hello1</a>
                    </div>
                </div>
            </div>

            <div class="vignette">
                <img  class="imageVignette" src="http://placehold.it/128x128"  />
                <div class="description">
                    <div class="detail">
                        <a href="#">hello1</a>
                    </div>
                </div>
            </div>

            <div class="vignette">
                <img  class="imageVignette" src="http://placehold.it/128x128"  />
                <div class="description">
                    <div class="detail">
                        <a href="#">hello1</a>
                    </div>
                </div>
            </div>

            <div class="vignette">
                <img  class="imageVignette" src="http://placehold.it/128x128"  />
                <div class="description">
                    <div class="detail">
                        <a href="#">hello1</a>
                    </div>
                </div>
            </div>

            <div class="vignette">
                <img  class="imageVignette" src="http://placehold.it/128x128"  />
                <div class="description">
                    <div class="detail">
                        <a href="#">hello1</a>
                    </div>
                </div>
            </div>    

            <div class="vignette">
                <img  class="imageVignette" src="http://placehold.it/128x128"  />
                <div class="description">
                    <div class="detail">
                        <a href="#">hello1</a>
                    </div>
                </div>
            </div>  




    </div>                             
</div>

我遇到两个无法解决的问题

1）在chrome上，当你翻滚有时它是所有的争夺并且以疯狂的方式移动到所有滑块！

2）.detail翻转仅在动画开始之前有效。

欢迎使用这个纯css3滑块的任何线索。

Answer 1

我稍微更新了你的代码。您可以查看here。

1。）在Chrome上我遇到了你上面描述的同样的问题：盒子的怪异运动只发生在动画开始之前。所以我删除了你的CSS动画的延迟，它工作正常。我仍然不确定为什么会发生这种情况，需要再看看它。

animation: move1 20s ease infinite; /* Removed delay due to weird behaviour */
-moz-animation: move1 20s ease infinite; 
-webkit-animation: move1 20s ease infinite;

2。）你的CSS中有一些奇怪的定位。我清理了其中的一些，并将缩放应用于悬停到父级。

您使用了内联块，但忘记删除尾随空格（http://css-tricks.com/fighting-the-space-between-inline-block-elements/）。所以我添加了HTML注释以摆脱空白。随意删除它们并使用“float：left;”而不是“内联阻止”。

我做的最后一件事是使用宽度的百分比值，所以你的旋转木马反应更灵敏。

修改我忘了将关键帧动画中的过渡值更改为百分比值。

html5 + css3滑块动画问题与chrome

1 个答案: