CSS3实现幻灯片轮播代码切换特效

CSS3实现幻灯片轮播代码切换特效

纯CSS3实现 幻灯片切换,纯CSS3实现的图片切换幻灯片代码是一款没用到JS跟jQuery实现的CSS3幻灯片特效。

CSS样式文件
在页面引入相关CSS文件

1
<link href="css/zzsc.css" type="text/css" rel="stylesheet" />

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<div id="gal">
  <nav class="galnav">
    <ul>
        <li><input type="radio" name="btn" value="one" checked="checked" />
        <label for="btn"></label>
        <figure>
          <img src="images/01_Fabio_Basile.jpg" />
          <figcaption>
            <h4>Fabio Basile</h4>
              <nav role='navigation'>
                <p>iPhone 6 Infinity</p>
        <ul>
            <li><a href="http://www.cnwebe.com" class="entypo-dribbble">
            </a></li>
            <li><a href="http://www.cnwebe.com" class="entypo-twitter"></a>
            </li>
        </ul>
              </nav>  
          </figcaption>
        </figure>
        </li>
        <li><input type="radio" name="btn" value="two" /> <label for="btn">
        </label>
         <figure class="entypo-forward">
          <img src="images/08_Brian_Miller.jpg" />
          <figcaption>
            <h4>Brian Miller</h4>
              <nav role='navigation'>
                <p>TypeTi.me</p>
        <ul>
            <li><a href="http://www.cnwebe.com" class="entypo-dribbble"></a>
            </li>
            <li><a href="http://www.cnwebe.com" class="entypo-twitter"></a>
            </li>
        </ul>
              </nav>  
          </figcaption>
        </figure>
        </li>
        <li><input type="radio" name="btn" value="three" /> <label for="btn">
        </label>
        <figure class="entypo-forward">
          <img src="images/05_Nicolas_Quod.jpg" />
          <figcaption>
            <h4>Nicolas Quod</h4>
              <nav role='navigation'>
                <p>Iphone 6 - Notification - iOS 7</p>
        <ul>
            <li>
            <a href="http://www.cnwebe.com" class="entypo-dribbble">
            </a></li>
            <li>
            <a href="http://www.cnwebe.com" class="entypo-twitter">
            </a></li>
        </ul>
              </nav>  
          </figcaption>
        </figure>
        </li>
        <li><input type="radio" name="btn" value="four" /> <label for="btn">
        </label>
         <figure class="entypo-forward">
          <img src="images/04_Joffrey.jpg" />
          <figcaption>
            <h4>Joffrey</h4>
              <nav role='navigation'>
                <p>鈻?/p&gt; </p>
        <ul>
            <li><a href="http://www.cnwebe.com" class="entypo-dribbble">
            </a></li>
            <li><a href="http://www.cnwebe.com" class="entypo-twitter">
            </a></li>
        </ul>
              </nav>  
          </figcaption>
        </figure>
        </li>
        <li><input type="radio" name="btn" value="five" /> <label for="btn">
        </label>
         <figure class="entypo-forward">
          <img src="images/09_Jared_Long.jpg" />
          <figcaption>
            <h4>Jared Long</h4>
              <nav role='navigation'>
                <p>Don&#39;t drop your iPhone Infinity</p>
        <ul>
            <li>
            <a href="http://www.cnwebe.com" class="entypo-dribbble">
            </a></li>
            <li>
            <a href="http://www.cnwebe.com" class="entypo-behance">
            </a></li>
        </ul>
              </nav>  
          </figcaption>
        </figure>
        </li>
        <li><input type="radio" name="btn" value="six" /> <label for="btn">
        </label>
         <figure class="entypo-forward">
          <img src="images/02_Charles_Treece.jpg" />
          <figcaption>
            <h4>Charles Treece</h4>
              <nav role='navigation'>
                <p>iPhone 6 Infinity Side Status Bar</p>
        <ul>
            <li>
            <a href="http://www.cnwebe.com" class="entypo-dribbble">
            </a></li>
            <li>
            <a href="http://www.cnwebe.com" class="entypo-twitter">
            </a></li>
        </ul>
              </nav>  
          </figcaption>
        </figure>
        </li>
    </ul>
  </nav>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论