纯CSS3百叶窗式切换轮播图特效-css教程-PHP中文网

首页

web前端

css教程

纯CSS3百叶窗式切换轮播图特效

黄舟

Jan 18, 2017 pm 01:48 PM

简要教程

这是一款使用纯CSS3制作的百叶窗式切换轮播图特效。该特效使用背景图片来制作，在轮播图切换时，通过一组div元素来制作百叶窗效果，非常的炫酷。

使用方法

HTML结构

该轮播图特效中使用了6张背景图片，HTML结构如下：

<div class="slider">
  <div class="captions">
    <div class="c1">duzy fiat</div>
    <div class="c2">syrenka</div>
    <div class="c3">wartburg</div>
    <div class="c4">warszawa</div>
    <div class="c5">wolga</div>
    <div class="c6">polonez</div>
  </div>
  <div class="img img1">
    <div class="frag frag1"></div>
    <div class="frag frag2"></div>
    <div class="frag frag3"></div>
    <div class="frag frag4"></div>
    <div class="frag frag5"></div>
    <div class="frag frag6"></div>
  </div>
  <div class="img img2">
    <div class="frag frag1"></div>
    <div class="frag frag2"></div>
    <div class="frag frag3"></div>
    <div class="frag frag4"></div>
    <div class="frag frag5"></div>
    <div class="frag frag6"></div>
  </div>
  <div class="img img3">
    <div class="frag frag1"></div>
    <div class="frag frag2"></div>
    <div class="frag frag3"></div>
    <div class="frag frag4"></div>
    <div class="frag frag5"></div>
    <div class="frag frag6"></div>
  </div>
  <div class="img img4">
    <div class="frag frag1"></div>
    <div class="frag frag2"></div>
    <div class="frag frag3"></div>
    <div class="frag frag4"></div>
    <div class="frag frag5"></div>
    <div class="frag frag6"></div>
  </div>
  <div class="img img5">
    <div class="frag frag1"></div>
    <div class="frag frag2"></div>
    <div class="frag frag3"></div>
    <div class="frag frag4"></div>
    <div class="frag frag5"></div>
    <div class="frag frag6"></div>
  </div>
  <div class="img img6">
    <div class="frag frag1"></div>
    <div class="frag frag2"></div>
    <div class="frag frag3"></div>
    <div class="frag frag4"></div>
    <div class="frag frag5"></div>
    <div class="frag frag6"></div>
  </div>
</div>

登录后复制

另外使用6个Radio按钮作为轮播图的切换按钮：

<input type="radio" name="slides" id="slide1" checked>
<input type="radio" name="slides" id="slide2">
<input type="radio" name="slides" id="slide3">
<input type="radio" name="slides" id="slide4">
<input type="radio" name="slides" id="slide5">
<input type="radio" name="slides" id="slide6">

登录后复制

CSS样式

轮播图的基本CSS样式如下：

.slider, .img {
  width: inherit;
  height: inherit;
}
.slider {
  position: relative;
  overflow: hidden;
  background-color: #000;
  border: 8px solid #eee;
  border-radius: 5px;
  box-shadow: 0 7px 20px rgba(0,0,0,.5);
}
.img {
  position: absolute;
  margin-left: -8px;
  perspective: 500px;
}
.frag {
  width: 150px;
  height: inherit;
  float: left;
  opacity: 0;
  z-index: 0;
  transform-origin: center right;
  transform: rotateY(90deg) translateZ(100px) scale(1.5);
  transition: transform .6s, opacity .6s, -webkit-filter 2s ease-out;
  -webkit-filter: saturate(0) blur(10px) brightness(.6) contrast(4);
}
.img .frag2 {
  background-position: -150px 0;
  transition-delay: .2s;
}
.img .frag3 {
  background-position: -300px 0;
  transition-delay: .4s;
}
.img .frag4 {
  background-position: -450px 0;
  transition-delay: .6s;
}
.img .frag5 {
  background-position: -600px 0;
  transition-delay: .8s;
}
.img .frag6 {
  background-position: -750px 0;
  transition-delay: 1s;
}

登录后复制

轮播图中使用的背景图片样式如下：

.img1 .frag { background-image: url(1.jpg) }
.img2 .frag { background-image: url(2.jpg) }
.img3 .frag { background-image: url(3.jpg) }
.img4 .frag { background-image: url(4.jpg) }
.img5 .frag { background-image: url(5.jpg) }
.img6 .frag { background-image: url(6.jpg) }

登录后复制

轮播图控制按钮的CSS样式如下：

#slide1:checked ~ .slider .img1 .frag, #slide2:checked ~ .slider .img2 .frag, #slide3:checked ~ .slider .img3 .frag, 
#slide4:checked ~ .slider .img4 .frag, #slide5:checked ~ .slider .img5 .frag, #slide6:checked ~ .slider .img6 .frag {
  transform: rotateY(0) translateZ(0) scale(1);
  -webkit-filter: saturate(1) blur(0) brightness(1) contrast(1);
  opacity: 1;
  z-index: 1;
}
 
.controls {
  position: absolute;
  bottom: -50px;
  left: 50%;
  margin-left: -115px; /*(6elem30px+5el10px)/2=115px*/
}
 
.controls label {
  display: block;
  height: 10px;
  width: 30px;
  float: left;
  background-color: #000;
  margin-right: 10px;
  cursor: pointer;
  opacity: .2;
  transition: opacity .5s;
}
 
.controls label:hover, .side-controls label:hover, 
#slide1:checked ~ .controls label:nth-of-type(1), 
#slide2:checked ~ .controls label:nth-of-type(2), 
#slide3:checked ~ .controls label:nth-of-type(3), 
#slide4:checked ~ .controls label:nth-of-type(4), 
#slide5:checked ~ .controls label:nth-of-type(5), 
#slide6:checked ~ .controls label:nth-of-type(6) { opacity: .8; }
 
.side-controls label {
  position: absolute;
  display: block;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  top: 50%;
  margin-top: -15px;
  cursor: pointer;
  opacity: .2;
  transition: opacity .5s;
}
 
#slide1:checked ~ .side-controls label:nth-of-type(6), 
#slide2:checked ~ .side-controls label:nth-of-type(1), 
#slide3:checked ~ .side-controls label:nth-of-type(2), 
#slide4:checked ~ .side-controls label:nth-of-type(3), 
#slide5:checked ~ .side-controls label:nth-of-type(4), 
#slide6:checked ~ .side-controls label:nth-of-type(5) {
  left: -40px;
  border-right: 40px solid #000;
}
 
#slide1:checked ~ .side-controls label:nth-of-type(2), 
#slide2:checked ~ .side-controls label:nth-of-type(3), 
#slide3:checked ~ .side-controls label:nth-of-type(4), 
#slide4:checked ~ .side-controls label:nth-of-type(5), 
#slide5:checked ~ .side-controls label:nth-of-type(6), 
#slide6:checked ~ .side-controls label:nth-of-type(1) {
  right: -40px;
  border-left: 40px solid #000;
}
 
#slide2:checked ~ .slider .captions .c2, 
#slide1:checked ~ .slider .captions .c1, 
#slide3:checked ~ .slider .captions .c3, 
#slide4:checked ~ .slider .captions .c4, 
#slide5:checked ~ .slider .captions .c5, 
#slide6:checked ~ .slider .captions .c6 { text-shadow: 0 0 0 rgba(255,255,255,.9) }

登录后复制

最后为图片标题设置CSS样式：

.captions > div {
  position: absolute;
  right: 20px;
  bottom: 7px;
  color: transparent;
  text-shadow: 0 0 60px transparent;
  font-size: 3em;
  z-index: 1;
  text-transform: uppercase;
  transition: text-shadow 2s;
}

登录后复制

以上就是纯CSS3百叶窗式切换轮播图特效的内容，更多相关内容请关注PHP中文网（www.php.cn）！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7685

Java教程

1639

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1229

显示更多

Related knowledge

纯CSS3怎么实现波浪效果？（代码示例） Jun 28, 2022 pm 01:39 PM

纯CSS3怎么实现波浪效果？本篇文章就来给大家介绍一下使用 SVG 和 CSS 动画制作波浪效果的方法，希望对大家有所帮助！

巧用CSS实现各种奇形怪状按钮（附代码） Jul 19, 2022 am 11:28 AM

本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮，希望对大家有所帮助！

css怎么隐藏元素但不占空间 Jun 01, 2022 pm 07:15 PM

两种方法：1、利用display属性，只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素，只需给元素添加“position:absolute;top:-9999px;”样式。

css3怎么实现花边边框 Sep 16, 2022 pm 07:11 PM

在css中，可以利用border-image属性来实现花边边框。border-image属性可以使用图片来创建边框，即给边框加上背景图片，只需要将背景图片指定为花边样式即可；语法“border-image: url(图片路径) 向内偏移值图像边界宽度 outset 是否重复;”。

使用微信小程序实现轮播图切换效果 Nov 21, 2023 pm 05:59 PM

使用微信小程序实现轮播图切换效果微信小程序是一种轻量级的应用程序，具有简单、高效的开发和使用特点。在微信小程序中，实现轮播图切换效果是常见的需求。本文将介绍如何使用微信小程序实现轮播图切换效果，并给出具体的代码示例。首先，在微信小程序的页面文件中，添加一个轮播图组件。例如，可以使用<swiper>标签来实现轮播图的切换效果。在该组件中，可以通过b

css3如何实现鼠标点击图片放大 Apr 25, 2022 pm 04:52 PM

实现方法：1、使用“:active”选择器选中鼠标点击图片的状态；2、使用transform属性和scale()函数实现图片放大效果，语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

JavaScript 如何实现轮播图的自动播放功能？ Oct 20, 2023 am 08:03 AM

JavaScript如何实现轮播图的自动播放功能？随着互联网的快速发展，轮播图已经成为了网页设计中常用的元素之一。轮播图不仅能够向用户展示多张图片，还可以通过自动播放功能，提升用户体验。而JavaScript正是实现轮播图自动播放功能的重要工具之一。本文将介绍JavaScript如何实现轮播图的自动播放功能，并提供相应的代码示例。首先，我们需要准备一些基本