1. CSS3笔记03-变形transform

    1. 缩放scale

    transform:scale(1.2);
    

    transform-origin:缩放开始位置

    transform-origin: bottom left;
    

    2. box-shadow 阴影

    用法同text-shadow

    3. 旋转rotate

    transform:scale(1.2)rotate(-10deg)
    

    4. 倾斜skew

    transform:scale(1.2)skew(-5deg, 30deg);
    

    skew的参数分别是x坐标角度和y坐标角度,也可以给相同的角度skew(30deg)

    5. 平移translate

    transform:scale(1.2)translate(20px, 40px ...
    Tagged as : css3 compass sass
  2. CSS3笔记02-悬停效果

    1. 首先需要了解几个伪类:

    • :hover选择器:当鼠标悬停在所指定的元素上时所使用的样式;
    • :active选择器:当所指定的元素处于激活状态(鼠标在元素上按下还没有松开)时所使用的样式;
    • :focus选择器:当元素获得光标焦点时使用的样式,主要用在文本框输入文字时使用.

    2. rgba

    color: #eee;
    color: rgba(255, 255, 255, 0.7);
    

    rgba增加了透明度,在上面例子中多添加一个color:#eee;是为了使不支持rgba的浏览器仍然有color可用。

    3. 文本阴影(text-shadow)

    a{
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    }
    

    text-shadow的属性如下:

    text-shadow: h-shadow v-shadow blur color ...
    Tagged as : css3 compass sass
  3. CSS3笔记01-过渡transition

    使用compass:

    @import "compass/css3/transition";
    div.foo{
        width: 50px;
        padding: 5px 10px;
        background: #9f3;
        @include transition-property(background, width);
        @include transition-duration(0.5s);
        @include transition-timing-function(ease-in);
    }
    
    div.foo:hover{
        background: #690;
        width: 100px;
    }
    

    对应的css3:

    div.foo {
      width: 50px;
      padding: 5px 10px ...
    Tagged as : css3 compass sass

Page 1 / 1