css3新属性

CSS calc()函数来制作响应式网格；

calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。原文来自：http://caibaojian.com/calc.html

以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意，两者只能使用一个哦，否则就会造成冲突了；

设置根字体大小，即1rem的长度；

@media (min-width: 320px) {
    html {
        font-size: 100%;
    }
}
@media (min-width: 360px) {
    html {
        font-size: 112.5%;
    }
}
@media (min-width: 384px) {
    html {
        font-size: 120%;
    }
}
@media (min-width: 400px) {
    html {
        font-size: 125%;
    }
}
@media (min-width: 540px) {
    html {
        font-size: 168.75%;
    }
}
@media (min-width: 600px) {
    html {
        font-size: 187.5%;
    }
}
@media (min-width: 640px) {
    html {
        font-size: 200%;
    }
}
@media (min-width: 720px) {
    html {
        font-size: 225%;
    }
}
@media (min-width: 768px) {
    html {
        font-size: 100%;
    }
}
html {
    font-size: calc(100vw / 320 * 16);// calc vm
}

css3动画特性
animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画效果是连贯性的。除了ease，linear、cubic-bezier之类的过渡函数都会为其插入补间。但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式。

#banner {
    height: 13.4rem;
    background: url(/public/images/wechat/BD/animation-bg.png) no-repeat top center;
    background-size: 27rem 26.875rem;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
    animation: twinkle-banner 2s steps(2) infinite;
}

@-webkit-keyframes twinkle-banner {
    from {background-position:50% 0}
    to {background-position:50% -26.9rem;}
}

@keyframes twinkle-banner {
    from {background-position:50% 0}
    to {background-position:50% -26.9rem;}
}}
其中from==0%；to==100%；
background-position的取值top center与50% 0 的效果一样，各种原因有待研究，包括baxkgroud-size的取值问题。

巴特西

css3新属性

最新文章

热门文章