Question

我在YouTube中找到的纯CSS Slider存在很大问题，最终结果相当不错，但存在许多缺点。 - 响应式设计 - 多个元素（图像，段落或div） -autoplay

我想要一张幻灯片，每张幻灯片包含1-2个文本和动画中的2-3个元素，最重要的是所有响应我希望有人可以帮助我。

视频原始src链接https://www.youtube.com/watch?v=MQUh-KhGjlU

我想尝试构建类似这样的http://codepen.io/SitePoint/pen/KwBWJd，但只有CSS和HTML才有可能（可能有几行javascrip很好但没有jquery）

HTML

<body>
    <input type="radio" name="slide" id="slide-1-radio" checked>
    <input type="radio" name="slide" id="slide-2-radio">
    <input type="radio" name="slide" id="slide-3-radio">
    <div id="slider">
        <div id="slide-1">
            <img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-9/256/square-icon.png" alt="slide-1">
            <h2>Slide 1</h2>
        </div>
        <div id="slide-2">
            <img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-9/256/square-icon.png" alt="slide-2">
            <h2>Slide 2</h2>
        </div>
        <div id="slide-3">
            <img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-9/256/square-icon.png" alt="slide-3">
            <h2>Slide 3</h2>
        </div>
        <div id="slider-next">
            <label for="slide-1-radio" id="slide-1-next"></label>
            <label for="slide-2-radio" id="slide-2-next"></label>
            <label for="slide-3-radio" id="slide-3-next"><span>&gt;</span></label>
        </div>
        <div id="slider-prev">
            <label for="slide-1-radio" id="slide-1-prev"></label>
            <label for="slide-2-radio" id="slide-2-prev"></label>
            <label for="slide-3-radio" id="slide-3-prev"><span>&lt;</span></label>
        </div>
    </div>
</body>

CSS

input{display: none;}
#slider{
  width: 100%;
  height: 400px;
  position: relative;
}

#slider #slide-1,#slide-2,#slide-3{
  width: 100%;
  height: 400px;
  position: absolute;
  top: 0;
  opacity: 0;
  z-index: 0;
  transition: 1s;
  left: 0;
  overflow: hidden;
}
#slider div img{
  position: absolute;
  bottom: -400;
  left: 300px;
}
#slider div h2{
  position: absolute;
  font-size: 100px;
  top: -300px;
  right: 400px;
  font-weight: 100;
}
/**********SLIDE-1****************/
#slide-1 img{
  animation: none;
}
@keyframes slide-1-img{
  0%{bottom: -400px;}
  50%{bottom: 10px;}
  75%{bottom: -10px;}
  100%{bottom: 0px;}
}
/**********SLIDE-2****************/
#slide-2 img{
  animation: none;
}
@keyframes slide-2-img{
  0%{bottom: -400px;}
  50%{bottom: 10px;}
  75%{bottom: -10px;}
  100%{bottom: 0px;}
}
/**********SLIDE-3****************/
#slide-3 img{
  animation: none;
}
@keyframes slide-3-img{
  0%{bottom: -400px;}
  50%{bottom: 10px;}
  75%{bottom: -10px;}
  100%{bottom: 0px;}
}
/*****************H2********************/
#slide-1 h2{
  animation: none;
}
@keyframes slide-1-h2{
  0%{top: -300px;}
  50%{top: 80px;}
  75%{top: 60px;}
  100%{top: 70px;}
}

#slide-2 h2{
  animation: none;
}
@keyframes slide-2-h2{
  0%{top: -300px;}
  50%{top: 80px;}
  75%{top: 60px;}
  100%{top: 70px;}
}

#slide-3 h2{
  animation: none;
}
@keyframes slide-3-h2{
  0%{top: -300px;}
  50%{top: 80px;}
  75%{top: 60px;}
  100%{top: 70px;}
}

/***************NEXT*********************/

#slider-next{
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -20px;
  z-index: 2;
}
#slider-next label{
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 50%;
  display: inline-block;
  color: #ffffff;
  cursor: pointer;
  z-index: 0;
}
#slider-next #slide-3-next{
  background-color: rgba(0,0,0,.3);
}
#slider-next #slide-3-next:hover{
  background-color: rgba(0,0,0,.5);
}
#slider-next #slide-1-next:hover~#slide-3-next{
  background-color: rgba(0,0,0,.5);
}
#slider-next #slide-2-next:hover~#slide-3-next{
  background-color: rgba(0,0,0,.5);
}
#slider-next label span{
  display: block;
  margin-top: 9px;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
}
/***************PREV*********************/

#slider-prev{
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -20px;
  z-index: 2;
}
#slider-prev label{
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 50%;
  display: inline-block;
  color: #ffffff;
  cursor: pointer;
  z-index: 0;
}
#slider-prev #slide-3-prev{
  background-color: rgba(0,0,0,.3);
}
#slider-prev #slide-3-prev:hover{
  background-color: rgba(0,0,0,.5);
}
#slider-prev #slide-1-prev:hover~#slide-3-prev{
  background-color: rgba(0,0,0,.5);
}
#slider-prev #slide-2-prev:hover~#slide-3-prev{
  background-color: rgba(0,0,0,.5);
}
#slider-prev label span{
  display: block;
  margin-top: 9px;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
}
/**************************SLIDER RADIO******************/
/*********SLIDE-1****************/
#slide-1-radio:checked~#slider #slide-1{
  opacity: 1;
  z-index: 1;
  left: 0;
}
#slide-1-radio:checked~#slider #slide-1 img{
  animation: slide-1-img 1s;
  animation-fill-mode: forwards;
}
#slide-1-radio:checked~#slider #slide-1 h2{
  animation: slide-1-h2 1s;
  animation-fill-mode: forwards;
}
#slide-1-radio:checked~#slider #slider-next #slide-2-next{
  z-index: 2;
}
#slide-1-radio:checked~#slider #slider-prev #slide-3-prev{
  z-index: 2;
}
/*********SLIDE-2****************/
#slide-2-radio:checked~#slider #slide-2{
  opacity: 1;
  z-index: 1;
  left: 0;
}
#slide-2-radio:checked~#slider #slide-2 img{
  animation: slide-2-img 1s;
  animation-fill-mode: forwards;
}
#slide-2-radio:checked~#slider #slide-2 h2{
  animation: slide-2-h2 1s;
  animation-fill-mode: forwards;
}
#slide-2-radio:checked~#slider #slider-next #slide-3-next{
  z-index: 2;
}
#slide-2-radio:checked~#slider #slider-prev #slide-1-prev{
  z-index: 2;
}
/*********SLIDE-3****************/
#slide-3-radio:checked~#slider #slide-3{
  opacity: 1;
  z-index: 1;
  left: 0;
}
#slide-3-radio:checked~#slider #slide-3 img{
  animation: slide-3-img 1s;
  animation-fill-mode: forwards;
}
#slide-3-radio:checked~#slider #slide-3 h2{
  animation: slide-3-h2 1s;
  animation-fill-mode: forwards;
}
#slide-3-radio:checked~#slider #slider-next #slide-1-next{
  z-index: 2;
}
#slide-3-radio:checked~#slider #slider-prev #slide-2-prev{
  z-index: 2;
}

Answer 1

如果您的问题是按钮位于错误的位置，您似乎在位置更改后忘记了px。

#slider-next{
 position: absolute;
 top: 50%;
 right: 10px;
 margin-top: -20px;
 z-index: 2;
}

如何用动画修复Slider纯CSS（没有java / jquery）[NO-RESPOSIVE]？

1 个答案: