文档章节

可以用CSS实现简单相册但是有些却必需要JS才能实现

陆地上的飞鱼
 陆地上的飞鱼
发布于 2013/12/04 00:23
字数 632
阅读 18
收藏 0

一个简单的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 }

© 著作权归作者所有

上一篇: Div的移动和变化
下一篇: C语言和HTML想法
陆地上的飞鱼
粉丝 20
博文 16
码字总数 5403
作品 0
成都
高级程序员
私信 提问
[译] 将第三方动画库集成到项目中 — 第 1 部分

原文地址:Integrating Third-Party Animation Libraries to a Project - Part 1 原文作者:Travis Almand 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:TUARAN 校...

掘金翻译计划
06/14
0
0
Firefox和IE之间7个JavaScript的差异

尽管 JavaScript 历史上使用冗长而令人生厌的代码块来标的特定浏览器的时期已经结束了,但是偶尔使用一些简单的代码块和对象检测来确保一些代码在用户机器上正常工作依然是必要的。 这篇文章...

asurann
2010/01/26
98
0
CC框架实践(3): 让jsBridge更优雅

前言 CC框架下如何让我们的jsBridge更加优雅? jsBridge是作为js和java之间通信的桥梁,本身它的职责只是完成通信。 本文不是介绍js与java通信过程的实现,你可以使用第三方库(如:JsBridg...

lucky_billy
2018/06/20
0
0
使用 Perl、jQuery、Ajax、JSON 和 MySQL 实现简单的登录

自 WWW 创始之初,开发人员就尝试为他们的网站提供新的特性和部件来吸引用户,并通过应用最新的技术来简化操作。如今,一个普通的 web 用户的主要活动就是网上购物、搜索信息、注册论坛和社区...

IBMdW
2011/06/10
1K
3
Web设计与开发终极资源大全(上)

Web 技术突飞猛进,Web 设计与开发者们可以选择的工具越来越多,Web 开发者的技巧不再只限于 HTML 和 服务器端编程,还需要精通各种第三方资源,这些第三方资源有时候比你的项目更复杂,更专...

红薯
2010/03/18
1K
3

没有更多内容

加载失败,请刷新页面

加载更多

GMTC2019|闲鱼-基于Flutter的架构演进与创新

2012年应届毕业加入阿里巴巴,主导了闲鱼基于Flutter的新混合架构,同时推进了Flutter在闲鱼各业务线的落地。未来将持续关注终端技术的演变及趋势 Flutter的优势与挑战 Flutter是Google开源的...

阿里云官方博客
21分钟前
1
0
ubuntu安装软件 报错:下列软件包有未满足的依赖关系

ubuntu安装软件,一直出现以下错误,还纳闷为毛都和 lksctp-tools 有关,上网差发现可能是 lksctp-tools安装错误。 pvc@pvc-Vostro-3650:~$ sudo apt-get install libnet1-dev 正在读取软件包...

琴麻岛
22分钟前
1
0
GMTC2019|闲鱼-基于Flutter的架构演进与创新

2012年应届毕业加入阿里巴巴,主导了闲鱼基于Flutter的新混合架构,同时推进了Flutter在闲鱼各业务线的落地。未来将持续关注终端技术的演变及趋势 Flutter的优势与挑战 Flutter是Google开源的...

zhaowei121
24分钟前
0
0
一段话系列-在抢购秒杀中,如何解决Redis读写分离带来的,主从同步延迟问题?

在抢购秒杀中,我们将数据缓存在Redis中,Redis我们为了提高QPS,使用了读写分离的架构,随之而来的便是主从同步延迟问题;在这里,我认为针对于主从同步延迟问题是不可避免的,我给出的解决...

EasyProgramming
25分钟前
3
0
linux sudo java : command not found

运行sudo java -version报错 [admin@localhost xxx]$ sudo java -version sudo: java: command not found 原因: 当使用sudo去执行一个程序时,处于安全的考虑,这个程序将在一个新的、最小化...

朝如青丝暮成雪
29分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部