Question

Here is a link to my Portfolio.

在下半部分，你会看到投资组合div而不是它没有居中的事实，我正试图在它上面做一些CSS3动画来模仿一个滑块。但是，我有一段时间试图让它发挥作用。

Here is a link to the CodePen.

没有颜色，页脚始终坐在底部不起作用不想设置高度，我需要帮助试图弄清楚我的错误在哪里在我的滑块中从左向右过渡。

我正在关注两个不同的教程，并尝试剖析它们以实现我在这里所拥有的。我使用JavaScript而不是使用JavaScript的主要原因是

我还没学会
我觉得CSS会变成一个非常非常强大的工具。

我的目标是让我的整个投资组合网站免费。

如果有人可以看一看并提供建议，那就太棒了!!!

Answer 1

这是一个FIDDLE，它作为纯粹的CSS滑块工作，我从HERE处理过来。您只需将HTML插入中间div，然后添加CSS，然后进行一些调整。

你能更多地解释一下你的页脚问题吗？

HTML很简单，这是CSS：

img {
    width: 400px;
    height: 300px;
}
#slider {
   background: #000;
   border: 5px solid #eaeaea;
   box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
   height: 300px;
   width: 400px;
   margin: 40px auto 0;
   overflow: visible;
   position: relative;
}
#mask {
   overflow: hidden;
   height: 320px; 
}
@keyframes cycle {
   0%  { top: 0px; } 
   4%  { top: 0px; }
   16% { top: 0px; opacity:1; z-index:0; } 
   20% { top: 325px; opacity: 0; z-index: 0; } 
   21% { top: -325px; opacity: 0; z-index: -1; }
   92% { top: -325px; opacity: 0; z-index: 0; }
   96% { top: -325px; opacity: 0; } 
   100%{ top: 0px; opacity: 1; }
}
@keyframes cycletwo {
   0%  { top: -325px; opacity: 0; }
   16% { top: -325px; opacity: 0; }
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }
   36% { top: 0px; opacity: 1; z-index: 0; }
   40% { top: 325px; opacity: 0; z-index: 0; }
   41% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclethree {
   0%  { top: -325px; opacity: 0; }
   36% { top: -325px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; } 
   56% { top: 0px; opacity: 1; } 
   60% { top: 325px; opacity: 0; z-index: 0; }
   61% { top: -325px; opacity: 0; z-index: -1; } 
   100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefour {
   0%  { top: -325px; opacity: 0; }
   56% { top: -325px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 325px; opacity: 0; z-index: 0; }
   81% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
   0%  { top: -325px; opacity: 0; }
   76% { top: -325px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 325px; opacity: 0; z-index: 0; }
}
@keyframes move {
   0% { transform: translateX(0); }
   100% { transform: translateX(100px); }
} 
@keyframes move {
   0% { transform: translateX(0); }
   50% { transform: translateX(20px); } 
   100% { transform: translateX(100px); }
}
#slider ul {
   margin: 0;
   padding: 0;
   position: relative;
}
#slider li { 
   width: 680px;
   height: 320px;
   position: absolute;
   top: -325px;
   list-style: none;
}
#slider li.firstanimation {
   animation: cycle 25s linear infinite;        
}
#slider li.secondanimation {
   animation: cycletwo 25s linear infinite; 
}
#slider li.thirdanimation {
   animation: cyclethree 25s linear infinite;       
}
#slider li.fourthanimation {
   animation: cyclefour 25s linear infinite;        
}
#slider li.fifthanimation {
   animation: cyclefive 25s linear infinite;        
}

CSS3滑块动画问题

1 个答案: