堆栈内存溢出
  繁体   English   中英

使用纯CSS的图像滑块下方的单选按钮

[英]Radio button under image sliders with pure CSS

 原文  2018-05-03 05:54:51  2   1    html/ css/ css3/ css-transitions/ css-animations

问题描述

当前，图像滑块为固定宽度，单选按钮的位置为行高。 如果将图像宽度切换为100％，单选按钮如何在响应式布局中保留在图像底部？

CSS 

.slideshow{
  width:640px;
  height:360px;
  max-height:760px;

  position:relative;
  text-align:center;.slideshow {
  width: 640px;
  height: 360px;
  max-height: 760px;

  position: relative;
  text-align: center;
  line-height: 75px;
  padding-bottom: 30px;
}
.slideshow input[type="radio"] {
  font-size: 0.75em;
  width: 1em;
  height: 1em;
  display: inline-block;
  position: relative;
  top: 0;
  bottom: 0;
  z-index: 99;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #ccc;
  border-radius: 1em;
  transition: 0.3s ease-out background, 0.3s ease-out transform;
}

.slideshow input[type="radio"]:checked {
  background: #999;
  outline: 0;
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  transform: scale(1.3);
}
.slideshow .slideshow-item {
  width: 640px;
  height: 360px;
  line-height: 1.5;
  position: absolute;
  top: 0;
  opacity: 0;
  transition: 0.3s ease-out opacity;
}
.slideshow .slideshow-item label {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  display: none;
  z-index: 88;
  cursor: pointer;
  color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.slideshow .slideshow-item label:after {
  display: block;
  content: "\25B6";
  font-size: 2em;
  color: #fff;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -0.5em;
}
.slideshow .slideshow-item label.previous {
  left: 0;
  display: block;
}
.slideshow .slideshow-item label.previous:after {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  transform: scaleX(-1);
  right: auto;
  left: 10px;.slideshow {
  width: 640px;
  height: 360px;
  max-height: 760px;

  position: relative;
  text-align: center;
  line-height: 75px;
  padding-bottom: 30px;
}
.slideshow input[type="radio"] {
  font-size: 0.75em;
  width: 1em;
  height: 1em;
  display: inline-block;
  position: relative;
  top: 0;
  bottom: 0;
  z-index: 99;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #ccc;
  border-radius: 1em;
  transition: 0.3s ease-out background, 0.3s ease-out transform;
}

.slideshow input[type="radio"]:checked {
  background: #999;
  outline: 0;
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  transform: scale(1.3);
}
.slideshow .slideshow-item {
  width: 640px;
  height: 360px;
  line-height: 1.5;
  position: absolute;
  top: 0;
  opacity: 0;
  transition: 0.3s ease-out opacity;
}
.slideshow .slideshow-item label {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  display: none;
  z-index: 88;
  cursor: pointer;
  color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.slideshow .slideshow-item label:after {
  display: block;
  content: "\25B6";
  font-size: 2em;
  color: #fff;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -0.5em;
}
.slideshow .slideshow-item label.previous {
  left: 0;
  display: block;
}
.slideshow .slideshow-item label.previous:after {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  transform: scaleX(-1);
  right: auto;
  left: 10px;
}
.slideshow .slideshow-item label.next {
  left: 50%;
  display: block;
}
.slideshow input[type="radio"]:checked + .slideshow-item {
  opacity: 1;
}

}
.slideshow .slideshow-item label.next {
  left: 50%;
  display: block;
}
.slideshow input[type="radio"]:checked + .slideshow-item {
  opacity: 1;
}

  line-height:75px;padding-bottom:30px}.slideshow input[type=radio]{
    font-size:.75em;
    width:1em;height:1em;
    display:inline-block;
    position:relative;
    top:0;
    bottom:0;
    z-index:99;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ccc;border-radius:1em;transition:.3s ease-out background,.3s ease-out transform}

.slideshow input[type=radio]:checked{
    background:#999;outline:0;-webkit-transform:scale(1.3);-moz-transform:scale(1.3);transform:scale(1.3)}.slideshow .slideshow-item{width:640px;height:360px;line-height:1.5;position:absolute;top:0;opacity:0;transition:.3s ease-out opacity}.slideshow .slideshow-item label{position:absolute;top:0;bottom:0;width:50%;display:none;z-index:88;cursor:pointer;color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.slideshow .slideshow-item label:after{display:block;content:'\25B6';font-size:2em;color:#fff;position:absolute;top:50%;right:10px;margin-top:-.5em}.slideshow .slideshow-item label.previous{left:0;display:block}.slideshow .slideshow-item label.previous:after{-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);transform:scaleX(-1);right:auto;left:10px}.slideshow .slideshow-item label.next{left:50%;display:block}.slideshow input[type=radio]:checked+.slideshow-item{opacity:1}

HTML 

<div class="page">
  <h1>Pure CSS slideshow</h1>
  <p>A proof of concept to have an image slideshow without javascript</p>
  <div class="slideshow">
    <input type="radio" name="slide" id="item-1" checked="checked" />
    <div class="slideshow-item">
      <img src="http://lorempixel.com/640/360/sports/1" />
      <label for="item-3" class="previous">Go to slide 3</label>
      <label for="item-2" class="next">Go to slide 2</label>
    </div>
    <input type="radio" name="slide" id="item-2" />
    <div class="slideshow-item">
      <img src="http://lorempixel.com/640/360/sports/2" />
      <label for="item-1" class="previous">Go to slide 1</label>
      <label for="item-3" class="next">Go to slide 3</label>
    </div>
    <input type="radio" name="slide" id="item-3" />
    <div class="slideshow-item">
      <img src="http://lorempixel.com/640/360/sports/3" />
      <label for="item-2" class="previous">Go to slide 2</label>
      <label for="item-1" class="next">Go to slide 1</label>
    </div>
  </div>
  <p>By <a href="https://twitter.com/joggink">@joggink</a> | <a href="https://github.com/joggink/pure-css-slideshow">View on github</a></p>
</div>

在这里链接

1 个解决方案

解决方案1
 1  2018-05-03 07:21:09

如果您的幻灯片放映高度是固定的，则可以使用CSS translateY。 codepen 

 .slideshow{ width:100%; height:360px; position:relative; text-align:center; padding-bottom:30px; background-color:green; } .slideshow input[type=radio]{ font-size:.75em; width:1em; height:1em; display:inline-block; position:relative; z-index:99; transform: translateY(360px); -webkit-appearance:none; -moz-appearance:none; appearance:none; background:#ccc; border-radius:1em; transition:.3s ease-out background,.3s ease-out transform } .slideshow input[type=radio]:checked{ background:#999;outline:0;transform: translateY(360px) scale(1.3)} .slideshow-item{ width:100%; height:360px; line-height:1.5; position:absolute; top:0; opacity:0; transition:.3s ease-out opacity} .slideshow .slideshow-item label{ position:absolute; top:0; bottom:0; width:50%; display:none; z-index:88; cursor:pointer; color:transparent; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none-moz-user-select:none;-ms-user-select:none;user-select:none}.slideshow .slideshow-item label:after{display:block;content:'\\25B6';font-size:2em;color:#fff;position:absolute;top:50%;right:10px;margin-top:-.5em}.slideshow .slideshow-item label.previous{left:0;display:block}.slideshow .slideshow-item label.previous:after{-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);transform:scaleX(-1);right:auto;left:10px}.slideshow .slideshow-item label.next{left:50%;display:block}.slideshow input[type=radio]:checked+.slideshow-item{opacity:1} 
 <div class="page"> <div class="slideshow"> <input type="radio" name="slide" id="item-1" checked="checked" /> <div class="slideshow-item"> <img src="http://lorempixel.com/640/360/sports/1" /> <label for="item-3" class="previous">Go to slide 3</label> <label for="item-2" class="next">Go to slide 2</label> </div> <input type="radio" name="slide" id="item-2" /> <div class="slideshow-item"> <img src="http://lorempixel.com/640/360/sports/2" /> <label for="item-1" class="previous">Go to slide 1</label> <label for="item-3" class="next">Go to slide 3</label> </div> <input type="radio" name="slide" id="item-3" /> <div class="slideshow-item"> <img src="http://lorempixel.com/640/360/sports/3" /> <label for="item-2" class="previous">Go to slide 2</label> <label for="item-1" class="next">Go to slide 1</label> </div> </div> <p>By <a href="https://twitter.com/joggink">@joggink</a> | <a href="https://github.com/joggink/pure-css-slideshow">View on github</a></p> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 纯CSS中图像滑块下的进度条 CSS：使用radio：checked滑动图像（纯CSS滑块） 单选按钮CSS上的背景图片 从单选按钮滑块的纯CSS实现创建JS事件 是否可以使用不带标签的纯CSS单选按钮输入进行自定义？ 如何在纯CSS中制作自定义复选框和单选按钮？ 纯 CSS 幻灯片单选按钮（第四个按钮充当第一个？） 纯HTML / CSS在按钮下创建三角形指针 纯CSS在未选中任何单选按钮时设置单选按钮组的方式？ 用于广播和复选框输入的纯CSS
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM