Rumah > hujung hadapan web > tutorial css > 纯CSS3百叶窗式切换轮播图特效

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

黄舟
Lepaskan: 2017-01-18 13:48:10
asal
1935 orang telah melayarinya

简要教程

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

使用方法

 HTML结构

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

<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>

Salin selepas log masuk

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

1

2

3

4

5

6

<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">

Salin selepas log masuk

CSS样式

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

.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;

}

Salin selepas log masuk

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

1

2

3

4

5

6

.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) }

Salin selepas log masuk

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

#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) }

Salin selepas log masuk

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

1

2

3

4

5

6

7

8

9

10

11

.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;

}

Salin selepas log masuk

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


Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan