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

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

前言：     

      “有了支付宝，生活真潦倒”-------不知从何时开始，这句魔咒犹如7、8月份的太阳，总是如影随形，如胶似漆，紧紧的围绕着广大的月光族，学生党以及纯D丝们。支付宝何人？它是所有taobaoer的必备工具，有了它，你就可以纵横淘宝，舌战店主，论剑小二，掏空荷包，无钱换的一声亲。在淘宝剥削广大劳动者荷包的背后，是其完整精致的用户体验，每一个小小的角落，都是UED高手们叱咤风云的江湖缩影。 好像有些扯远了，今天键手分享的是利用CSS及DIV实现网页标签及图片的动画效果的小小经验。不才抛砖，砖家带玉。

      1，鼠标滑过时的标签变化效果（一）

      各位看官，在浏览网页时，当鼠标经过一些标签（本文中的标签指图片或文字），经常都会出现变色，放大，或者是出现下划线，这些功能的实现其实很简单，这里用CSS中常见的伪类hover做一个演示：

case1:鼠标经过时文字变为红色，

CSS部分：
.title:hover{
    color:red;
 }

 case2：鼠标经过时背景变色，需要注意的是，不能为了追求视觉效果盲目设置过大的背景高宽度，过高或过宽的背景都会造成浏览器的回流（1）或者重绘（2），这是得不偿失的。

 

CSS部分：
.title:hover{
    background-color:red;
    height:40px; /*假设标签高度为40像素*/
    margin:      /*根据需要设置margin的值*/
}

case3：鼠标经过时出现下划线，

 

CSS部分：
.title:hover{
   text-decoration: underline;
}

case4:鼠标经过出现手型，适用于非a标签，

CSS部分：
.title:hover{
    cursor: pointer; 
}   

    2,鼠标滑过时的标签变化效果（二）

    前面讲的都是文字的变化，那么图片是否也能进行变化呢？答案是肯定的，鼠标指向或是点击图片标签，同样能实现变色或是背景切换的效果。这里不讨论filter，依然以hover举例，女朋友吵着要看《天天向上》，

 

 最终效果引小白：http://pan.baidu.com/share/link?shareid=150806602&uk=1915769746&third=15