如何使用CSS向此图像滑块添加单选按钮

时间：2016-02-17 02:11:18

标签： html css image slider radio-button

所以我浏览了一个自动滑动图像的图像滑块，但现在我想添加一个按钮部分，以便人们可以返回并选择他们想要选择的图像。但是当我尝试运行Radio Buttons时，当左边的动画开始时它们会消失...我如何修复按钮以便它们不会同时移动并且所有的apear同时出现？

要查看我正在谈论的内容，请转到CSS上的/ Slider /和HTML。

/*Header*/

.header {
  /*Base*/
  background: #22232e;
  width: 100%;
  top: 0;
  position: fixed;
  height: 73px;
  -webkit-box-shadow: 0px 1px 12px #1e1f2d;
  -moz-box-shadow: 0px 1px 12px #1e1f2d;
  box-shadow: 0px 1px 12px #1e1f2d;
  z-index: 2;
}
.nav {
  /*Zona para a Lista*/
  margin: 0 auto;
  width: 900px;
  text-align: center;
}
#lista1 {
  /*Lista*/
  padding: 15px;
  overflow: hidden;
  margin: 0 auto;
  text-align: center;
}
#lista1 li {
  /*Cada linha da Lista*/
  list-style: none;
  float: left;
  margin-left: 60px;
  margin-right: auto;
}
a {
  /*Link de cada linha*/
  transition: all 0.3s ease-in;
  text-decoration: none;
  text-align: center;
  -webkit-animation: fadein 2s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s;
  /* Internet Explorer */
  -o-animation: fadein 2s;
  /* Opera < 12.1 */
  animation: fadein 2s;
}
a:hover {
  /*Link por cima de cada linha*/
  -webkit-stroke-width: 4px;
  -webkit-stroke-color: #FFF;
  -webkit-fill-color: #FFF;
  text-shadow: 1px 0px 20px #8f95e5;
}
/*Body*/

body {
  /*Base*/
  background-image: url(images/fundo.png);
  background-color: #000;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 100%;
}
.container {
  /*Limites da Página*/
  width: 960px;
  margin: 0 auto;
}
/*Slider*/

#content-slider {
  width: 100%;
  height: 360px;
  margin: auto 0;
  top: 100px;
  right: 0;
  left: 0;
  position: relative;
}
#slider {
  background: #22232e;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
  height: 320px;
  width: 700px;
  margin: auto;
  left: 0;
  right: 0;
  overflow: visible;
  position: relative;
}
#mask {
  overflow: hidden;
  height: 320px;
}
#slider ul {
  margin: 0;
  padding: 0;
  position: relative;
}
#slider li {
  width: 718px;
  height: 320px;
  position: absolute;
  left: -705px;
  list-style: none;
}
#slider li.firstanimation {
  -moz-animation: cycle 25s linear infinite;
  -webkit-animation: cycle 25s linear infinite;
}
#slider li.secondanimation {
  -moz-animation: cycletwo 25s linear infinite;
  -webkit-animation: cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
  -moz-animation: cyclethree 25s linear infinite;
  -webkit-animation: cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
  -moz-animation: cyclefour 25s linear infinite;
  -webkit-animation: cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
  -moz-animation: cyclefive 25s linear infinite;
  -webkit-animation: cyclefive 25s linear infinite;
}
#slider .tooltip {
  background: rgba(23, 24, 36, 0.4);
  width: 700px;
  height: 60px;
  position: absolute;
  bottom: -320px;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
#slider .tooltip h1 {
  text-shadow: 0px 0px 2px #171824;
  color: #CCC;
  font-size: 24px;
  text-align: center;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
  bottom: 0px;
}
/*Gallery*/

.gallery {
  top: 100px;
  margin: auto;
  width: 716px;
  height: 785px;
  position: relative;
}
div.img {
  display: block;
  margin: 7px;
  float: left;
  width: 165px;
}
div.img:hover {
  filter: brightness(150%);
  -webkit-filter: brightness(150%);
  -webkit-transition: all .6s ease;
}
div.img img {
  width: 100%;
  height: auto;
}
/*Footer*/

#footer {
  margin: auto;
  bottom: 0;
  left: 0;
  right: 0;
  background: #22232e;
  width: 350px;
  height: 63px;
  position: fixed;
  -webkit-box-shadow: 1px 1px 12px #1e1f2d;
  -moz-box-shadow: 1px 1px 12px #1e1f2d;
  box-shadow: 1px 1px 12px #1e1f2d;
}
#lista2 {
  overflow: hidden;
  margin: auto;
  text-align: center;
  margin: auto;
  position: absolute;
  bottom: 15;
}
#lista2 li {
  list-style: none;
  float: left;
  padding: 3 px;
}
#lista2 a {
  transition: all 0.3s ease-in;
}
#lista2 a:hover {
  -webkit-filter: drop-shadow(1px 0px 5px #43476e);
  filter: drop-shadow(1px 0px 5px #43476e);
}
/*Animations*/

/*Animação da Header*/

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*Animação do Slider*/

@-moz-keyframes cycle {
  0% {
    top: 0px;
  }
  4% {
    top: 0px;
  }
  16% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  20% {
    top: 705px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    top: -705px;
    opacity: 0;
    z-index: -1;
  }
  92% {
    top: -705px;
    opacity: 0;
    z-index: 0;
  }
  96% {
    top: -705px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}
@-moz-keyframes cycletwo {
  0% {
    top: -705px;
    opacity: 0;
  }
  16% {
    top: -705px;
    opacity: 0;
  }
  20% {
    top: 0px;
    opacity: 1;
  }
  24% {
    top: 0px;
    opacity: 1;
  }
  36% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  40% {
    top: 705px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    top: -705px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -705px;
    opacity: 0;
    z-index: -1;
  }
}
@-moz-keyframes cyclethree {
  0% {
    left: -705px;
    opacity: 0;
  }
  36% {
    left: -705px;
    opacity: 0;
  }
  40% {
    left: 0px;
    opacity: 1;
  }
  44% {
    left: 0px;
    opacity: 1;
  }
  56% {
    left: 0px;
    opacity: 1;
  }
  60% {
    left: 705px;
    opacity: 0;
    z-index: 0;
  }
  61% {
    left: -705px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    left: -705px;
    opacity: 0;
    z-index: -1;
  }
}
@-moz-keyframes cyclefour {
  0% {
    left: -705px;
    opacity: 0;
  }
  56% {
    left: -705px;
    opacity: 0;
  }
  60% {
    left: 0px;
    opacity: 1;
  }
  64% {
    top: 0px;
    opacity: 1;
  }
  76% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  80% {
    top: 705px;
    opacity: 0;
    z-index: 0;
  }
  81% {
    top: -705px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -705px;
    opacity: 0;
    z-index: -1;
  }
}
@-moz-keyframes cyclefive {
  0% {
    left: -705px;
    opacity: 0;
  }
  76% {
    left: -705px;
    opacity: 0;
  }
  80% {
    left: 0px;
    opacity: 1;
  }
  84% {
    left: 0px;
    opacity: 1;
  }
  96% {
    left: 0px;
    opacity: 1;
    z-index: 0;
  }
  100% {
    left: 705px;
    opacity: 0;
    z-index: 0;
  }
}
@-webkit-keyframes cycle {
  0% {
    left: 0px;
  }
  4% {
    left: 0px;
  }
  16% {
    left: 0px;
    opacity: 1;
    z-index: 0;
  }
  20% {
    left: 705px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    left: -705px;
    opacity: 0;
    z-index: -1;
  }
  50% {
    left: -705px;
    opacity: 0;
    z-index: -1;
  }
  92% {
    left: -705px;
    opacity: 0;
    z-index: 0;
  }
  96% {
    left: -705px;
    opacity: 0;
  }
  100% {
    left: 0px;
    opacity: 1;
  }
}
@-webkit-keyframes cycletwo {
  0% {
    left: -705px;
    opacity: 0;
  }
  16% {
    left: -705px;
    opacity: 0;
  }
  20% {
    left: 0px;
    opacity: 1;
  }
  24% {
    left: 0px;
    opacity: 1;
  }
  36% {
    left: 0px;
    opacity: 1;
    z-index: 0;
  }
  40% {
    left: 705px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    left: -705px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    left: -705px;
    opacity: 0;
    z-index: -1;
  }
}
@-webkit-keyframes cyclethree {
  0% {
    left: -705px;
    opacity: 0;
  }
  36% {
    left: -705px;
    opacity: 0;
  }
  40% {
    left: 0px;
    opacity: 1;
  }
  44% {
    left: 0px;
    opacity: 1;
  }
  56% {
    left: 0px;
    opacity: 1;
    z-index: 0;
  }
  60% {
    left: 705px;
    opacity: 0;
    z-index: 0;
  }
  61% {
    left: -705px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    left: -705px;
    opacity: 0;
    z-index: -1;
  }
}
@-webkit-keyframes cyclefour {
  0% {
    left: -705px;
    opacity: 0;
  }
  56% {
    left: -705px;
    opacity: 0;
  }
  60% {
    left: 0px;
    opacity: 1;
  }
  64% {
    left: 0px;
    opacity: 1;
  }
  76% {
    left: 0px;
    opacity: 1;
    z-index: 0;
  }
  80% {
    left: 705px;
    opacity: 0;
    z-index: 0;
  }
  81% {
    left: -705px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    left: -705px;
    opacity: 0;
    z-index: -1;
  }
}
@-webkit-keyframes cyclefive {
  0% {
    left: -705px;
    opacity: 0;
  }
  76% {
    left: -705px;
    opacity: 0;
  }
  80% {
    left: 0px;
    opacity: 1;
  }
  84% {
    left: 0px;
    opacity: 1;
  }
  96% {
    left: 0px;
    opacity: 1;
    z-index: 0;
  }
  100% {
    left: 705px;
    opacity: 0;
    z-index: 0;
  }
}
/*Imagens*/

.capa {
  background-image: url(images/capa.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 80%;
  height: 80%;
  margin: auto;
  -webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}
/*Tipos de Letra*/

.sans {
  font-family: sans;
  font-size: 30px;
  color: #727484
}
@font-face {
  font-family: 'sans';
  src: url('fonts/sans/OpenSans-Light-webfont.eot');
  src: url('fonts/sans/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/sans/OpenSans-Light-webfont.woff') format('woff'), url('fonts/sans/OpenSans-Light-webfont.ttf') format('truetype'), url('fonts/sans/OpenSans-Light-webfont.svg') format('svg');
}
<!DOCTYPE html html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Portfólio Ornelas</title>
  <style type="text/css">
    @import url("css/styles.css");
  </style>
</head>

<body>

  <!--Início de Header-->
  <div class="header">
    <div class="container">
      <div class="nav">
        <ul id="lista1">
          <li><a href="index.html"><span class="sans">HOME</span></a>
          </li>
          <li><a href="quem_sou.html"><span class="sans">QUEM SOU</span></a>
          </li>
          <li><a href="portfolio.html"><span class="sans">PORTFÓLIO</span></a>
          </li>
          <li><a href="contactos.html"><span class="sans">CONTACTOS</span></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- Fim de Header-->

  <!--Início de Slider-->
  <div class="container">
    <div id="content-slider">
      <div id="slider">
        <div id="mask">
          <ul>
            <li id="first" class="firstanimation">
              <input type="radio" id="slide1" name="slide" checked>
              <label for="slide1"></label>
              <a href="#">
                <img src="css/images/imagem1.png" width="700px" />
              </a>
              <div class="tooltip">
                <h1 class="sans">CASCALHO E ORNELAS</h1>
              </div>
            </li>

            <li id="second" class="secondanimation">
              <input type="radio" id="slide2" name="slide" checked>
              <label for="slide2"></label>
              <a href="#">
                <img src="css/images/imagem1.png" width="700px" />
              </a>
              <div class="tooltip">
                <h1 class="sans">CASCALHO E ORNELAS</h1>
              </div>
            </li>

            <li id="third" class="thirdanimation">
              <input type="radio" id="slide3" name="slide" checked>
              <label for="slide3"></label>
              <a href="#">
                <img src="css/images/imagem1.png" width="700px" />
              </a>
              <div class="tooltip">
                <h1 class="sans">CASCALHO E ORNELAS</h1>
              </div>
            </li>

            <li id="fourth" class="fourthanimation">
              <input type="radio" id="slide4" name="slide" checked>
              <label for="slide4"></label>
              <a href="#">
                <img src="css/images/imagem1.png" width="700px" />
              </a>
              <div class="tooltip">
                <h1 class="sans">CASCALHO E ORNELAS</h1>
              </div>
            </li>

            <li id="fifth" class="fifthanimation">
              <input type="radio" id="slide5" name="slide" checked>
              <label for="slide5"></label>
              <a href="#">
                <img src="css/images/imagem1.png" width="700px" />
              </a>
              <div class="tooltip">
                <h1 class="sans">CASCALHO E ORNELAS</h1>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!--Fim de Slider-->

  <!--Início de Gallery-->
  <div class="container">
    <div class="gallery">

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="224">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>

      <div class="img">
        <a target="_blank" href="css/images/imagem1.png">
          <img src="css/images/imagem1.png" alt="IMAGEM1" width="300" height="300">
        </a>
      </div>
    </div>
  </div>
  <!--Fim de Gallery-->

  <!--Início de Footer-->
  <div id="footer">
    <div class="nav">
      <div class="footer-logos">
        <ul id="lista2">
          <li>
            <a href="https://www.facebook.com">
              <img src="css/images/facebook.png" style="height:34px">
            </a>
          </li>
          <li>
            <a href="https://www.youtube.com">
              <img src="css/images/youtube.png" style="height:34px">
            </a>
          </li>
          <li>
            <a href="https://www.google.com">
              <img src="css/images/google.png" style="height:34px">
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!--Fim de Footer-->

</body>

</html>

1 个答案:

答案 0 :(得分：0)

你想做这样的事吗？ https://getbootstrap.com/examples/carousel/ 我建议使用bootstraps carousel。

相关问题
最新问题