Full CSS3 Lightbox

2015/12/09 53295

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

?
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Full CSS3 Lightbox|w3cplus</title>
    <meta name="keywords" content="css3学习,css3属性详解,css3 transition,如何学好css3">
    <meta name="description" content="W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。">
    <link rel="shortcut icon" href="http://www.w3cplus.com/sites/all/themes/marvin/favicon.ico">
    <link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3/base.css" media="all" />
    <link rel="stylesheet" type="text/css" href="css/style.css" media="all">
    <style type="text/css">
@-webkit-keyframes supersize {
  from {-webkit-transform: scale(0.9);}
  to {-webkit-transform: scale(1);}
}
@-moz-keyframes supersize {
  from {-moz-transform: scale(0.9);}
  to {-moz-transform: scale(1);}
}
@-o-keyframes supersize {
  from {-o-transform: scale(0.9);}
  to {-o-transform: scale(1);}
}
@-ms-keyframes supersize {
  from {-ms-transform: scale(0.9);}
  to {-ms-transform: scale(1);}
}
@keyframes supersize {
  from {transform: scale(0.9);}
  to {transform: scale(1);}
}
body{
  background: url(http://www.w3cplus.com/demo/css3/CSS3HoverEffects/black-bg.png) repeat;
}
.link-img,
.full-img {
  margin: 0;
  padding: 0;
  list-style: none outside none;
}
.link-img {
  width: 930px;
  margin: 20px auto;
}
.link-img li {
  float: left;
  display: inline;
}
.link-img a {
  display: block;
  float: left;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
  border: 5px solid white;
  margin: 10px;
}
.link-img img {
  vertical-align: top;
　-webkit-transition:opacity .2s linear;
  -moz-transition:opacity .2s linear;
  -o-transition:opacity .2s linear;
  transition:opacity .2s linear;
}
.link-img a:hover img {
  opacity: 0.75;
}
.link-img a:active img {
  margin-top: 1px;
}
li[id] {
  overflow:hidden;
  position:absolute;
  width:0;
  height:0;
  left:0;
  top:0;
  opacity:0;
  background:rgba(0,0,0,.8);
  -webkit-transition:opacity 1.2s cubic-bezier(0,0,0,1);
  -moz-transition:opacity 1.2s cubic-bezier(0,0,0,1);
  -o-transition:opacity 1.2s cubic-bezier(0,0,0,1);
  transition:opacity 1.2s cubic-bezier(0,0,0,1);
}
li[id] a:before {
  content:url(close.png);
  position:absolute;
  margin-top:-15px;
  margin-left:-15px;
  z-index: 9999;
  opacity:0;
}
li[id] a:hover:before {opacity:1;}
li[id]:target {
  width:100%;
  height:100%;
  opacity:1;
  display: table;
  text-align: center;
}
li[id]:target a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
li[id]:target a img {
  border:15px solid #fff;
  box-shadow:0 1px 8px #000;
  -webkit-animation:supersize .8s cubic-bezier(0,0,0,1);
  -moz-animation:supersize .8s cubic-bezier(0,0,0,1);
  -o-animation:supersize .8s cubic-bezier(0,0,0,1);
  -ms-animation:supersize .8s cubic-bezier(0,0,0,1);
  animation:supersize .8s cubic-bezier(0,0,0,1);
}
    </style>
</head>
<body>
<div class="wrap_top_nav">
    <nav id="top_nav">
        <ul class="inline-style clearfix">
            <li><a href="http://www.w3cplus.com" target="_blank">w3cplus</a></li>
            <li><a href="http://www.w3cplus.com/resources/css3-tutorial-and-case" target="_blank">css3详解教程</a></li>
            <li><a href="http://www.w3cplus.com/demos/list.html" target="_blank">css3实例</a></li>
            <li><a href="http://www.w3cplus.com/demo/tags/242.html" target="_blank">藤藤每日一练</a></li>
        </ul>
        <a id="read" href="http://www.w3cplus.com/demo/full-css3-lightbox.html" target="_blank">查看原文>></a>
    </nav>
</div>
<div class="page">
    <header id="header">
        <hgrounp class="white">
            <h1>Full CSS3 Lightbox</h1>
            <h2>作者：大漠(如有更好建议或疑问请加群：1041263)<h2>
        </hgrounp>
    </header>
    <section class="demo">
        <ul class="link-img clearfix">
            <li><a href="#pic1"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/8s.jpg" alt="Picture 1"></a></li>
            <li><a href="#pic2"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/6s.jpg" alt="Picture 2"></a></li>
            <li><a href="#pic3"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/4s.jpg" alt="Picture 3"></a></li>
            <li><a href="#pic4"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/2s.jpg" alt="Picture 4"></a></li>
            <li><a href="#pic5"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/1s.jpg" alt="Picture 5"></a></li>
            <li><a href="#pic6"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/3s.jpg" alt="Picture 3"></a></li>
            <li><a href="#pic7"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/5s.jpg" alt="Picture 4"></a></li>
            <li><a href="#pic8"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/7s.jpg" alt="Picture 5"></a></li>
          </ul>
          <ul class="full-img">
            <li id="pic1"><a href="#home"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/8.jpg" alt=""></a></li>
            <li id="pic2"><a href="#home"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/6.jpg" alt=""></a></li>
            <li id="pic3"><a href="#home"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/4.jpg" alt=""></a></li>
            <li id="pic4"><a href="#home"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/2.jpg" alt=""></a></li>
            <li id="pic5"><a href="#home"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/1.jpg" alt=""></a></li>
            <li id="pic6"><a href="#home"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/3.jpg" alt=""></a></li>
            <li id="pic7"><a href="#home"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/5.jpg" alt=""></a></li>
            <li id="pic8"><a href="#home"><img src="http://www.w3cplus.com/demo/css3/pureCSS3Lightbox/7.jpg" alt=""></a></li>
          </ul>
    </section>
    <section id="ad_w3cplus">
        <div class="grid-ad">
        <script type="text/javascript">
/*250*250，创建于2012-10-14-3*/
var cpro_id = "u1089145";
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
        </div>
        <div class="grid-ad">
        <script type="text/javascript">
/*250*250，创建于2012-10-14-2*/
var cpro_id = "u1089141";
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
        </div>
        <div class="grid-ad">
        <script type="text/javascript">
/*250*250，创建于2012-10-11*/
var cpro_id = "u1086065";
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
        </div>
        <p><script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F177319b798978621f83845b12c86fa29' type='text/javascript'%3E%3C/script%3E"));
</script>
</p>
    </section>
</div>
</body>
</html>