web前端：CSS+div的动态效果(二)

                  web前端：CSS+DIV下的动态标签（二）

接上文：上文谈到使用CSS伪类hover以及DIV实现文字标签的变色及下划线效果，本文将继续深入发掘CSS伪类的其他属性；在伪类中，hover和active的使用方法大致相同，此不赘述，看官类推即可。

        1，图片标签的动态效果

    在浏览网络图片时，图片的左边或者右边都会出现箭头指向，当鼠标滑过，箭头的颜色也随之改变，先上图：

/*首先把一张图片设置为DIV的背景图片*/
CSS部分：
.btn{
   width:34px;
   height:39px;
   margin：   ;     /*按需设置*/
   background:url("btnleft.png");
}
/*下面是动态效果，需要一张同样大小的图片作为替换*/
.btn:hover{
   background:url("btnleftcopy.png");
}

         2,点击图片动画效果

      除了使用JS和A标签，善用伪类active也能实现点击切换图片的事件。先看图，代码随后附上：

/*首先依然是使用一张图片座位DIV的背景图片，需要设置高宽以及位置*/

.column{
    float:left；
     margin:   ;/*按需求设置*/
    width:915px;
    height:356px;
    background:url("columnimg.png");
}
/*下面是用active来实现点击切换图片效果的事件*/

.column：active{
    background:url("columnimgcopy.png");
}

      3,滑动图片实现背景透明效果

     在CSS中，透明效果的实现，大多数是用filter来做滤镜，但是考虑到浏览器的兼容问题，使用伪类hover来解决，也不失一个便捷的选择。代码和前面两个其实一样的，不过是使用了一张透明的同尺寸图片作为替换背景。使用的hover实现背景透明，请见下图：

今天就先写到这里，coding有风险，常备颈复康！三颗药喂你们吃：

 

 

 

动态图片的最终效果：

http://pan.baidu.com/share/link?shareid=462193962&uk=1915769746&third=15