H5_0013：CSS特色样式集

按比例变化，同时又限制最大宽高

".start-wrap {",

" width:40%;",

" top: 83.21%;",

" max-width: 143px;",

" max-height: 2px;",

" position: absolute;",

" left: 50%;",

" transform: translate(-50%,0%);",

"}",

背景透明，内容不透明：

div {
background: rgba(0, 0, 0, 0.2) none repeat scroll !important;/* rgba(0, 0, 0, 0.2) 前三个确定颜色，最后0.2确定透明度 */
/*实现FireFox背景透明，文字不透明*/
background: #ffffff;
filter: Alpha(opacity=20);
/*实现IE背景透明,文字不透明*/
width: 200px;
height: 300px;
color: #000000;
font-size: 20px;
font-weight: bold;
}

整体透明：

opacity:0.4;

style="background-color:transparent;"

css样式优先级：

left:50% !important;

 

 

1，div横竖居中显示

宽度用百分比，高度根据实际情况而定，div的最大宽高都做了限制

".start-wrap {",
" width:34.5%;",
" position: absolute;",
" left: 50%;",
" transform: translate(-50%,-50%);",
" top: 50%;",
" max-width: 143px;",
" max-height: 52px;",
"}",

2，transform动画特效

例如：

.timepoint{

width:7.25%;

height:88.24%;

position:absolute;

right: 30%;

top: -40%;

background-image: url("$15885866%");

background-size: contain;

background-repeat: no-repeat;

background-position: center;

transition: all 0.5s;

transform: scale(0);

transition-delay: 1s;

}

1秒的时间比例从0到1。

js调用：

div.timepoint.transform = "scale(1)",

 

 

 

 

        // js给元素增减css样式

        // $(".stp4button").addClass("animation"),

        // $(".stp4button").removeClass("animation"),

z-index 为 -1 是隐藏

    $("#mian_nor").css("z-index", "-1"),

    $("#yi_nor").css("z-index", "1"))