能夠用CSS實現簡單相冊可是有些卻必須要JS才能實現

一個簡單的CSS相冊

1. [代碼]index.html     

01	<div class="gallery">

02	<a tabindex="1"><img src="images/1.jpg"></a>

03	<a tabindex="2"><img src="images/2.jpg"></a>

04	<a tabindex="3"><img src="images/3.jpg"></a>

05	<a tabindex="4"><img src="images/4.jpg"></a>

06	<a tabindex="5"><img src="images/5.jpg"></a>

07	<a tabindex="6"><img src="images/6.jpg"></a>

08	<a tabindex="7"><img src="images/7.jpg"></a>

09	<a tabindex="8"><img src="images/8.jpg"></a>

10	<a tabindex="9"><img src="images/9.jpg"></a>

11	<a tabindex="10"><img src="images/10.jpg"></a>

12	<a tabindex="11"><img src="images/11.jpg"></a>

13	<a tabindex="12"><img src="images/12.jpg"></a>

14

</div>

2. [代碼]main.css     

001	/* Photo Gallery styles */

002	.gallery {

003	margin: 100px auto 0;

004	width: 800px;

005

}

006	.gallery a {

007	display: inline-block;

008	height: 135px;

009	position: relative;

010	width: 180px;

011

012	/* CSS3 Prevent selections */

013	-moz-user-select: none;

014	-webkit-user-select: none;

015	-khtml-user-select: none;

016	user-select: none;

017

}

018	.gallery a img {

019	border: 8px solid #fff;

020	border-bottom: 20px solid #fff;

021	cursor: pointer;

022	display: block;

023	height: 100%;

024	left: 0px;

025	position: absolute;

026

top: 0px;

027	width: 100%;

028	z-index: 1;

029

030	/* CSS3 Box sizing property */

031	-moz-box-sizing: border-box;

032	-webkit-box-sizing: border-box;

033	-o-box-sizing: border-box;

034	box-sizing: border-box;

035

036	/* CSS3 transition rules */

037	-webkit-transition: all 1.0s ease;

038	-moz-transition: all 1.0s ease;

039	-o-transition: all 1.0s ease;

040	transition: all 1.0s ease;

041

042	/* CSS3 Box Shadow */

043	-moz-box-shadow: 2px 2px 4px #444;

044	-webkit-box-shadow: 2px 2px 4px #444;

045	-o-box-shadow: 2px 2px 4px #444;

046	box-shadow: 2px 2px 4px #444;

047

}

048

049	/* Custom CSS3 rotate transformation */

050	.gallery a:nth-child(1) img {

051	-moz-transform: rotate(-25deg);

052	-webkit-transform: rotate(-25deg);

053	transform: rotate(-25deg);

054

}

055	.gallery a:nth-child(2) img {

056	-moz-transform: rotate(-20deg);

057	-webkit-transform: rotate(-20deg);

058	transform: rotate(-20deg);

059

}

060	.gallery a:nth-child(3) img {

061	-moz-transform: rotate(-15deg);

062	-webkit-transform: rotate(-15deg);

063	transform: rotate(-15deg);

064

}

065	.gallery a:nth-child(4) img {

066	-moz-transform: rotate(-10deg);

067	-webkit-transform: rotate(-10deg);

068	transform: rotate(-10deg);

069

}

070	.gallery a:nth-child(5) img {

071	-moz-transform: rotate(-5deg);

072	-webkit-transform: rotate(-5deg);

073	transform: rotate(-5deg);

074

}

075	.gallery a:nth-child(6) img {

076	-moz-transform: rotate(0deg);

077	-webkit-transform: rotate(0deg);

078	transform: rotate(0deg);

079

}

080	.gallery a:nth-child(7) img {

081	-moz-transform: rotate(5deg);

082	-webkit-transform: rotate(5deg);

083	transform: rotate(5deg);

084

}

085	.gallery a:nth-child(8) img {

086	-moz-transform: rotate(10deg);

087	-webkit-transform: rotate(10deg);

088	transform: rotate(10deg);

089

}

090	.gallery a:nth-child(9) img {

091	-moz-transform: rotate(15deg);

092	-webkit-transform: rotate(15deg);

093	transform: rotate(15deg);

094

}

095	.gallery a:nth-child(10) img {

096	-moz-transform: rotate(20deg);

097	-webkit-transform: rotate(20deg);

098	transform: rotate(20deg);

099

}

100	.gallery a:nth-child(11) img {

101	-moz-transform: rotate(25deg);

102	-webkit-transform: rotate(25deg);

103	transform: rotate(25deg);

104

}

105	.gallery a:nth-child(12) img {

106	-moz-transform: rotate(30deg);

107	-webkit-transform: rotate(30deg);

108	transform: rotate(30deg);

109

}

110

111	.gallery a:focus img {

112	cursor: default;

113	height: 250%;

114	left: -150px;

115	top: -100px;

116	position: absolute;

117	width: 250%;

118	z-index: 25;

119

120	/* CSS3 transition rules */

121	-webkit-transition: all 1.0s ease;

122	-moz-transition: all 1.0s ease;

123	-o-transition: all 1.0s ease;

124	transition: all 1.0s ease;

125

126	/* CSS3 transform rules */

127	-moz-transform: rotate(0deg);

128	-webkit-transform: rotate(0deg);

129	-o-transform: rotate(0deg);

130	transform: rotate(0deg);

131

}