css3新加模块 a标签伪类选择器 过渡模块 渐变 弹性 手风

a标签伪类选择器

a:link选择器：修改从未被访问过的a标签样式。

a:hover选择器：修改鼠标悬停在a标签上的样式。

a:active选择器：修改链接被长按时的样式。

a:visited选择器：修改已经被访问过的a标签样式。

注意：若以上四个同时出现，则需要严格按照link，visited，hover，active的顺序从上到下出现（love,hate）。

若其中两个同一个样式，则可以缩写，比如link，visited样式一样，可以直接写成a{color:red;}，之后按照顺序依次写hover，active。

过渡模块

过渡三要素：必须要有属性发生变化；必须告诉属性需要执行的过渡效果；必须告诉系统过渡效果持续时长。

注意：hover伪类选择器不仅可以用在a标签上，还可以用在其他的任何标签上。

渐变

比如：如果一个div宽100px,高50px，此时想要实现效果：将鼠标悬停在这个div上面的时候，这个div的宽度增加到300px，并且是在5s之内渐渐加宽，而不是一下子的瞬间变化，因为瞬间变化会比较突兀和生硬。

div:hover{ width:300px; }

div{  transition-property:width;   //要执行的过渡效果

transition-duration:5s;     //过渡效果持续的时长}

若想让颜色渐变，阔以如下：

div:hover{ width:300px;background-color:blue; }

div{  transition-property:width;  

transition-duration:5s;

transition-property:background-color; //后面属性覆盖前面属性

transition-duration:5s; }

代码效果：宽度瞬间变成300px，之后在5s之内背景色渐变为蓝色。

若想让颜色和宽度都在5s内出现渐变，阔以如下代码：

div:hover{ width:300px;background-color:blue; }

div{  transition-property:width,background-color ;  

transition-duration:5s, 5s;

//transition-delay:2s; 这句话是说原状态保持2s,延迟2s后才开始渐变 }

属性：transition-timing-function

可取值为liner,ease,ease-in,ease-out,ease-in-out，表示水平方向上控制动画运动的速度

连写

格式：transition:过渡属性 过渡时长 运动速度 延迟时间；

若想给多个属性添加过渡效果，可以如下格式：

transition:过渡属性1 过渡时长 运动速度 延迟时间,过渡属性2 过渡时长 运动速度 延迟时间；

弹性

代码示例：

<div>

<span>江</span>

<span>哥</span>

<span>带</span>

<span>你</span>

</div>

div span{transition-property:margin 3s;}
div:hover span{ margin:0 20px;}

原图：                                                                               效果图（向外拉伸移动）：

                                             

手风

<ul>
<li><img src=’ ad1.jpg’></li>
<li><img src=’ ad2.jpg’></li>
<li><img src=’ ad3.jpg’></li>
</ul>

Ul{ overflow:hidden; }

Ul li{
List-style:none;  Width:160px;
Height:300px;   float:left;
ransition-property:width ,0.5s; }

Ul:hover li{ width:100px; }

Ul li:hover{
Width:460px;
}