CSS3学习笔记

#div2 {
    -webkit-transform: rotate(30deg); /*以重心为中点顺时针旋转30度以后*/
    border-radius: 20px; /*20是圆的半径*/
    -webkit-box-shadow: 30px 30px 5px #000; /*四个参数分别表示左偏移量，上偏移量，模糊程度，阴影颜色*/
    -webkit-background-size: 63px 100px; /*背景尺寸*/
    background-origin: border-box; /*值域里还有padding-box和content-box，分别表示从外到内三层的边缘开始铺设背景图片。*/
    text-shadow: 5px 5px 5px #FF0000; /*四个参数同box-shadow的*/
    word-wrap: break-word; /*长单词强制换行*/
}

@font-face {
    font-family: MyFirstFont;
    src: url(‘Sansation_Light.ttf‘);/*字体的本地地址*/
}

#q {
    font-family: MyFirstFont;
    width: 10px;
    height: 20px;
}

#q #div {
    -webkit-transform: translate(50px, 100px); /*相对于id=q的元素移动的位置*/
    -webkit-transform: scale(2, 4); /*放大尺寸倍数*/
    -webkit-transform: skew(30deg, 20deg); /*X、Y轴翻转角度*/
    -webkit-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
    /*matrix() 方法把所有 2D 转换方法组合在一起。
    matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。*/
    /*3D变换就是把2D的属性后面加上XYZ，如果三维都有变换，就在后面加3d。*/
}

#at {
    width: 100px;
    height: 100px;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /*变化所需时间。-webkit-transform是文字跟着变化2s，如果删除，文字会直接变成如结果所示*/
}

#at:hover {
    width: 300px;
    height: 300px;
    -webkit-transform: rotate(180deg); /*指针移除图像时，图像恢复原状。*/
}

#w {
    width: 100px;
    height: 100px;
    background: yellow;
    -webkit-transition-property: width;
    -webkit-transition-duration: 1s; /*持续时间。*/
    -webkit-transition-timing-function: linear; /*过渡时间曲线，这里是匀速过渡。*/
    -webkit-transition-delay: 2s; /*延迟时间。*/
    /* 以上可简写为transition: width 1s linear 2s;*/
}

#w:hover {
    width: 200px;
}

@-webkit-keyframes myfirst {
    from {
        background: yellow;
    }
    to {
        background: blue;
    }
}

#d {
    -webkit-animation: myfirst 5s; /*产生动画*/
}

@-webkit-keyframes mysecond {
    0% {
        background: red;
    }
    25% {
        background: yellow;
    }
    50% {
        background: blue;
    }
    100% {
        background: green;
    }
}

#d {
    -webkit-animation: myfirst 5s; /*产生动画*/
}
.newspaper{
    -webkit-column-count:3; /* 多列显示 */
    -webkit-column-gap:10px;/* 列间距 */
    -webkit-column-rule:4px outset #ff0000;/* 列之间的样式 */
}