纯CSS焦点图轮播效果

2018-2-23 10:35| 发布者: admin| 查看: 503| 评论: 0|来自: 蚂蚁部落

通常实现焦点图轮播效果需要结合JavaScript,因为图片需要进行自动切换,有互动效果。

由于CSS3的出现,所以实现一些焦点图轮播的时候,JavaScript不再是必须的。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>蚂蚁部落</title>
<style type="text/css">
html,body {
  margin: 0px;
  padding: 0px;
}
.carousel {
  position: relative;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
  margin-top: 26px;
}
.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.carousel-open:checked+.carousel-item {
  position: static;
  opacity: 100;
}
.carousel-item {
  position: absolute;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.carousel-item img {
  display: block;
  height: auto;
  max-width: 100%;
}
.carousel-control {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 40px;
  height: 40px;
  line-height: 35px;
  position: absolute;
  top: 50%;
  cursor: pointer;
  transform: translate(0, -50%);
  text-align: center;
  width: 40px;
  z-index: 10;
}
.carousel-control.prev {
  left: 2%;
}
.carousel-control.next {
  right: 2%;
}
.carousel-control:hover {
  background: rgba(0, 0, 0, 0.8);
  color: #aaaaaa;
}
#carousel-1:checked~.control-1,
#carousel-2:checked~.control-2,
#carousel-3:checked~.control-3 {
  display: block;
}
.carousel-indicators {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}
.carousel-indicators li {
  display: inline-block;
  margin: 0 5px;
}
.carousel-bullet {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 35px;
}
.carousel-bullet:hover {
  color: #aaaaaa;
}
#carousel-1:checked~.control-1~.carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked~.control-2~.carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked~.control-3~.carousel-indicators li:nth-child(3) .carousel-bullet {
  color: #428bca;
}
#title {
  width: 100%;
  position: absolute;
  padding: 0px;
  margin: 0px auto;
  text-align: center;
  font-size: 27px;
  color: rgba(255, 255, 255, 1);
  font-family: 'Open Sans', sans-serif;
  z-index: 9999;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}
.carousel-item .imgs {
  display: block;
  width: 100%;
  height: 80vh;
}
.imgs1 {
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}
.imgs2 {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#a18cd1), to(#fbc2eb));
  background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
.imgs3 {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#fad0c4), to(#ffd1ff));
  background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
}
</style>
</head>
<body>
  <div class="carousel">
    <div class="carousel-inner">
      <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked=>
      <div class="carousel-item">
        <div class="imgs imgs1"></div>
      </div>
      <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
      <div class="carousel-item">
        <div class="imgs imgs2"></div>
      </div>
      <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
      <div class="carousel-item">
        <div class="imgs imgs3"></div>
      </div>
      <label for="carousel-3" class="carousel-control prev control-1">‹</label>
      <label for="carousel-2" class="carousel-control next control-1">›</label>
      <label for="carousel-1" class="carousel-control prev control-2">‹</label>
      <label for="carousel-3" class="carousel-control next control-2">›</label>
      <label for="carousel-2" class="carousel-control prev control-3">‹</label>
      <label for="carousel-1" class="carousel-control next control-3">›</label>
      <ol class="carousel-indicators">
        <li>
          <label for="carousel-1" class="carousel-bullet">•</label>
        </li>
        <li>
          <label for="carousel-2" class="carousel-bullet">•</label>
        </li>
        <li>
          <label for="carousel-3" class="carousel-bullet">•</label>
        </li>
      </ol>
    </div>
  </div>
</body>
</html>

上面实现了预期效果,当然上面没有放置真正的图片,原理大致如此,更多内容参阅相关阅读。

相关阅读:

(1).box-shadow参阅CSS3 box-shadow一章节。

(2).+选择器参阅CSS (E+F)相邻选择器一章节。

(3).transition参阅CSS3 transition一章节。

(4).rgba参阅CSS3 RGBA一章节。

(5).transform参阅CSS3 transform一章节。

(6).z-index参阅CSS z-index属性一章节。

(7).~参阅选择器CSS (E~F)兄弟选择符一章节


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部