工作中 常用CSS3记录

 

/*border和padding计算入width之内，其实就是怪异模式了,
    多用于排版
*/
    }

#div{
        box-sizing:border-box;  
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */}


/*1.边框圆角,边框阴影*/
.div{
    border-radius:6px;
    /*圆形*/
     border-radius:50%;
/*
    box-shadow: h-shadow v-shadow blur spread color inset(outset);*/

    box-shadow: 1px 1px 1px #666; 
}
  

  /*2.背景图片的大小*/

.bg-img{
    background:url(../img/find_pw_on_2.png)  no-repeat center center !important;
    background-size: 27px auto !important;
    /*background-size: 100% 100%;*/
    /*background-size: 50px 100px*/
}

/*3.文本效果*/
.text{
    /*规定文字水平阴影、垂直阴影、模糊距离，以及阴影的颜色*/
    text-shadow:5px 5px 5px #FF0000;
    /*允许长单词换行到下一行*/
    word-wrap:break-word;
    /*显示省略符号来代表被修剪的文本 配合white-space:nowrap; overflow:hidden;使用*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}

/*5.元素2D---移动、旋转、放大/缩小、翻转；3D---X轴旋转、Y轴旋转*/
.trans2d{
    /*从其当前位置移动 left top*/
    transform:translate(50px, 100px);
    /*顺时针旋转给定的角度(允许负值--逆时针旋转)。*/
    transform:rotate(30deg);
    /*尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数*/
    transform:scale(2,4);
    /*翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数*/
    transform:skew(30deg,20deg);

    /*把所有 2D 转换方法组合在一起*/
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);

    -ms-transform: ;        /* IE 9 */
    -webkit-transform: ;    /* Safari and Chrome */
    -o-transform: ;     /* Opera */
    -moz-transform: ;       /* Firefox */


}
.trans3d{
    -ms-transform: ;        /* IE 9 */
    -webkit-transform: ;    /* Safari and Chrome */
    -o-transform: ;     /* Opera */
    -moz-transform: ;        Firefox 
    transform:rotateX(30deg);
    transform:rotateY(30deg);


}


/*6.过渡效果transition*/

div{
    width:100px;
    height:100px;
    background:yellow;
    transition:width 2s linear 2s, height 2s linear 2s,transform 2s linear 2s;     //一般配合hover使用
    -moz-transition:width 2s linear 2s, height 2s linear 2s, -moz-transform 2s linear 2s; /* Firefox 4 
    -webkit-transition:width 2s linear 2s, height 2s linear 2s, -webkit-transform 2s linear 2s; /* Safari and Chrome */
    -o-transition:width 2s linear 2s, height 2s linear 2s, -o-transform 2s linear 2s; /* Opera */
}
 
div:hover{
    width:200px;
    height:200px;
    transform:rotate(180deg);
    -moz-transform:rotate(180deg); /* Firefox 4 */
    -webkit-transform:rotate(180deg); /* Safari and Chrome */
    -o-transform:rotate(180deg); /* Opera */
}

/*7.动画@keyframes、animation--例子（输入框自定义光标动画）*/

.custom-cursor {
    width: 2px;
    height: 45px;
    background-color: #2F323A;
    position: absolute;
    top: 32px;
    right: 20px;
    animation: cursor 1s linear infinite;
    -webkit-animation: cursor 1s linear infinite;
    -moz-animation: cursor 1s linear infinite;
    -o-animation: cursor 1s linear infinite;
}
@keyframes cursor {
    0% {
        opacity: 0
    }
    50% {
        opacity: 0
    }
    50.1% {
        opacity: 1
    }
    100% {
        opacity: 1
    }
}
@-webkit-keyframes cursor {
    0% {
        opacity: 0
    }
    50% {
        opacity: 0
    }
    50.1% {
        opacity: 1
    }
    100% {
        opacity: 1
    }
}
@-moz-keyframes cursor {
    0% {
        opacity: 0
    }
    50% {
        opacity: 0
    }
    50.1% {
        opacity: 1
    }
    100% {
        opacity: 1
    }
}
@-o-keyframes cursor {
    0% {
        opacity: 0
    }
    50% {
        opacity: 0
    }
    50.1% {
        opacity: 1
    }
    100% {
        opacity: 1
    }
}