纯CSS3创建一个相册效果，感觉很好，在这里与你分享，最重要的是不要使用一行JS，这是亮点




今天，我偶然发现计算机中有这样一个例子。这种感觉很好。我不记得什么时候下载的。我好久没看见w3cfuns。我怀念我学习前台的那一天，我会和你分享这一天。

设计素描 uff1a


效果不好或不好，最重要的是不要用一行JS，这是亮点。

首先查看HTML文件：

复制代码代码如下所示：


纯CSS3相册效果






































简要说明：

1，在UL中，李决定照片的数量。

2、UL采用风格浮动：右，宽度：140px；使它显示在右边的相册

3，浮动：左边的李允许李浮在左边。储存在里县的div是绝对的，地位是绝对的，这是定位根据div #长廊。默认只是第一次显示。

4。当鼠标移动到李，李的跨度IMG的透明度和李DIV显示将在大画面显示

下一个是CSS文件：

复制代码代码如下所示：

体
{
字体微软雅黑；
}
#画廊
{
宽度：700px；
职位：相对；
保证金：20px汽车0；
背景颜色：# 000；
最小高度：400px；
填料：20px；
}
标题
#画廊H1
{
颜色：# FFF；
字体大小：2em；
字体粗细：粗体；
}
#画廊UL
{
宽度：140px；
浮子：右边；
保证金：10px 0 20px；
}
#画廊UL Li
{
浮点数：左；
保证金：00 20px 8px；
}
#画廊UL Li跨度
{
显示块；
职位：相对；
宽度：60px；
身高：80px；
边境：1px solid # FFF；
-moz边界半径：4px；
WebKit的边界半径：4px；
MS：4px边界半径；
- o-border-radius：4px；
边界半径：4px；
溢出：隐藏；
}
#画廊UL Li跨IMG
{
职位：相对；
上图：- 200px；
左：- 100px；
滤镜：alpha（不透明度= 30）；
不透明性：0.3；
}
#画廊ul ul span.touch IMG，#画廊：悬停跨度IMG
{
不透明性：1；
滤镜：alpha（不透明度= 100）；
}
#画廊：悬停div ul
{
显示块；
}
#画廊ul div img
{
宽度：460px；
身高：288px；
}
#画廊UL Li div
{
显示：无；
位置：绝对；
上图：100px；
左：30px；
边境：5px固体# FFF；
}
clearfix。
{
清楚：两者；
}



在CSS中没有复杂的风格，并没有说明是怎样做的。此外，在HTML中我介绍了CSS，reset.css复位方式，你也可以使用您自己的自定义的复位方式：

复制代码代码如下所示：
HTML、体、div、跨度、小程序、对象、iframe、H1、H2、H3、H4、H5、H6、P、blockquote，预，，简称，缩写，地址，大，引用代码，德尔，DFN、EM、字体、IMG、INS、大骨节病，Q，s. Samp，小，罢工，强，子，燮，TT、瓦尔河、B、U、I、中心、DL、DT、DD、OL、UL、李、中、形式、标签、传奇{
保证金：0；
填充：0；
字体大小：100%；
边界：0；
大纲：0；
背景：透明；
}
输入输出
列表样式：无；
}
blockquote，问{
报价：无；
}
焦点{
大纲：0；
}
表{
边界塌陷：塌陷；
边框间距：0；
}

源点击下载