伪类的使用

伪类hover

我在DW的学习中发现伪类是一个很好玩的东西。

hover  伪类在鼠标移到元素上时向此元素添加特殊的样式。

 

例子： 当鼠标移入big时，使其颜色改变和border-radius改变，让它从正方形变更成一个圆

CSS代码 1：这是改变之前的样式

CSS代码 2：这是改变之后的样式

效果图：

                               

左边是变化之前，右边是鼠标移入之后的

 

伪类原理很简单：一开始元素执行的是代码1的样式，鼠标移入后执行的是代码2的样式。也就是说把代码1相同的样式覆盖掉。

 

就拿上面的例子来讲： 上面触发伪类就后执行下面的样式

注：1. 所以使用伪类你注意权重问题，如果你后面的样式权重没有大过前面的权重就没法覆盖上面的样式；

         2. 伪类只能改变父元素里面的子元素。

3.可以改变的属性有： width ，height， background ，box-shadow

      还可以结合： CSS3的动画使用 transform使用等；

 

    4.你可以在要改变的元素中添加transition这个样式，可以这个元素的效果，简单来讲就是让元素动态地改变。

       语法：transition：all 2s ease 3s;

1. 第一个数值代表的是过渡的属性，all代表所有
2. 第二个代表的是动画开始到结束的时间
3. ease是过渡的函数，可以不写，默认为ease;
4. 最后一个是延迟时间

CSS3动画效果

    CSS3的动画效果有很多：

        例如： 旋转rotate  位移translate   扭曲skew  缩放scale

        这些是结合transform使用的

1. 旋转rotate（angle）  代码：

1. 度数为负数逆时针转
2. 度数为正数顺时针转

    代码：将box1顺时针转60度

       

    效果图：

                               

    （2）缩放scale( n ) 

1. n代表的是放大和缩小的倍数
2. n>1 代表着放大n倍
3. n<1 代表着缩小n倍
4. n=1 代表着不变

代码：将box2缩小0.5倍

效果图：

                              

（3）位移translate

            1.  transform: translateX( n px)   在X轴上位移n px;

             2.  transform: translateY( n px)   在Y轴上位移n px;

             3.  n为负数反方向位移

    （4）扭曲  skew

             1.  transform: skewX(n deg)      沿着 X 轴扭曲n度

        2. transform: skewY(n deg)      沿着 Y 轴扭曲n度