css3案例分析,王安琪：CSS3网站案例分析——以“Fine Goods”为例

一、“抽屉”效果展示

Fine Goods是一个购物网站，它的整体网页设计运用了多处CSS3技巧。

网址：http://www.finegoodsmarket.com/

我想给大家展示的是它运用的一个“打开抽屉”的样式技巧，位于页面的左侧。

当鼠标远离“抽屉”时，它是一个静止的状态；而当鼠标移至某一个“抽屉”的上方，“抽屉”就会打开；一旦鼠标离开，该“抽屉”就会恢复原状。如下图所示：

二、html代码和css代码

1. 抽屉部分的html代码如下：

2. 抽屉部分的css代码如下：

.drawers{padding-top:20px;-webkit-transform:translatez(0);background:0;zoom:1}

.drawers:after{display:block;visibility:hidden;height:0;clear:both;content:"."}

.drawers ul,

.drawers li{

list-style:none;text-align:center;margin:0;padding:0

}

.drawers li{

width:106px;height:35px;background:#210700;

position:relative;margin-bottom:10px;float:left;z-index:1;

-moz-border-radius:2px;-webkit-border-radius:2px;-o-border-radius:2px;

border-radius:2px

}

.drawers li a{

background:url(img/drawer.png) center -13px

no-repeat;display:block;

position:absolute;left:2px;top:2px;width:102px;height:32px;margin-left:0;

-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s

ease-in-out;

transition:all .3s ease-in-out;

-webkit-box-shadow:0 2px 2px rgba(19,4,0,0.6),

transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0

0 0;

-moz-box-shadow:0 2px 2px rgba(19,4,0,0.6),transparent 0 0

0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;

box-shadow:0 2px 2px rgba(19,4,0,0.6),transparent 0 0 0,transparent

0 0 0,transparent 0 0 0,transparent 0 0 0

}

.drawers li:hover,

.drawers

li.current{z-index:2;background:#0f0300}

.drawers li:hover a,

.drawers li.current a{

width:112px;height:45px;margin-left:-6px;background-position:center

0;

-webkit-box-shadow:0 15px 10px rgba(14,2,0,0.5),0 20px 30px

#0e0200,transparent 0 0 0,transparent 0 0 0,transparent 0 0

0;

-moz-box-shadow:0 15px 10px rgba(14,2,0,0.5),0 20px 30px

#0e0200,transparent 0 0 0,transparent 0 0 0,transparent 0 0

0;

box-shadow:0 15px 10px rgba(14,2,0,0.5),0 20px 30px

#0e0200,transparent 0 0 0,transparent 0 0 0,transparent 0 0

0

}

.drawers.with_labels

li{height:54px;-webkit-transform:translatez(0)}

.multiplebgs .drawers.with_labels li:nth-child(2n+1)

a{

background-position:center -77px,center -10px

}

.drawers.with_labels li a{

background:url(img/drawer_small_wlabel.png) center -10px

no-repeat;height:50px

}

.multiplebgs .drawers.with_labels li a{

background-image:url(img/drawer_wear.png),url(img/drawer_small_wlabel.png);

background-position:center -10px,center -10px

}

.drawers.with_labels li a span{

display:block;text-align:center;color:#000;font-size:14px;

margin-top:16px;font-weight:500;-webkit-transition:margin-top .3s

ease-in-out;

-moz-transition:margin-top .3s ease-in-out;transition:margin-top

.3s ease-in-out;

text-shadow:0 1px 0

rgba(2217,177,71,0.3);-webkit-transform:translatez(0)

}

.drawers.with_labels li:hover a,

.drawers.with_labels li

.current a{

height:63px;background-position:center 2px

}

.multiplebgs .drawers.with_labels li:hover a,

.multiplebgs .drawers.with_labels li

.current a{

background-position:center 2px,center 2px

}

.no-boxshadow .drawers.with_labels li:hover a,

.no-boxshadow .drawers.with_labels li

.current a{

border-bottom:1px solid #240d00

}

.drawers.with_labels li:hover a span,

.drawers.with_labels li

.current a span{background:0;margin-top:29px}

.multiplebgs .drawers.with_labels li:hover:nth-child(2n+1)

a,

.multiplebgs .drawers.with_labels li

.current:nth-child(2n+1) a{

background-position:center -65px,center 2px

}

三、使用的指令及其效果

1.

:hover

选择器用于选择鼠标指针浮动在上面的元素。

:after 选择器在被选元素的内容后面插入内容。

2.

box-shadow

属性向框添加一个或多个阴影。

注释：box-shadow

向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由

2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是

0。

值

描述

h-shadow

必需。水平阴影的位置。允许负值。

v-shadow

必需。垂直阴影的位置。允许负值。

blur

可选。模糊距离。

spread

可选。阴影的尺寸。

color

可选。阴影的颜色。请参阅 CSS

颜色值。

inset

可选。将外部阴影 (outset)

改为内部阴影。

3.

transition 属性是一个简写属性，用于设置四个过渡属性：

·

transition-property

·

transition-duration

·

transition-timing-function

·

transition-delay

4.

:nth-child(n) 选择器匹配属于其父元素的第 N

个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

总的来说，这个“抽屉”拉动的效果是将“鼠标不在图标上、鼠标悬浮在图标上、鼠标点击图标后”这几个阶段分开设置，使用阴影、过渡等效果骗过了我们的眼睛，造成一种抽屉打开、关上的错觉。