H5_0013：CSS特色样式集

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"))

 

转载于:https://www.cnblogs.com/eliteboy/p/10862403.html