问如何修复Slider纯CSS动画(没有java/jquery) [无响应]？
EN

Stack Overflow用户

提问于 2015-08-20 15:38:16

回答 1查看 325关注 0票数 0

我在YouTube中发现的纯CSS有一个很大的问题，最终的结果很好，但也有很多缺点。-responsive设计-multi元素(图像、段落或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;
}

css

回答 1

Stack Overflow用户

发布于 2015-08-20 16:07:49

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32122546

复制

相似问题

问如何修复Slider纯CSS动画(没有java/jquery) [无响应]？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何修复Slider纯CSS动画(没有java/jquery) [无响应]？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何修复Slider纯CSS动画(没有java/jquery) [无响应]？
EN