css3

CSS

消除transition闪屏
-

.css {
     -webkit-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -webkit-perspective: 1000;
 }

• 过渡动画（在没有启动硬件加速的情况下）会出现抖动的现象， 以上的 解决方案只是改变 视角 来启动硬件加速的一种方式； 启动硬件加速的 另外一种方式：

.css {
     -webkit-transform: translate3d(0,0,0);
     -moz-transform: translate3d(0,0,0);
     -ms-transform: translate3d(0,0,0);
     transform: translate3d(0,0,0);
   }

• 启动硬件加速 最常用的方式：translate3d、translateZ、transform
• opacity属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态）
• will-chang属性（这个比较偏僻），一般配合opacity与translate使用（而且经测试，除了上述可以引发硬件加速的属性外， 其它属性并不会变成复合层），
• 弊端： 硬件加速会导致 CPU性能占用量过大，电池电量消耗加大 ；因此 尽量避免泛滥使用硬件加速。

css实现单行文本溢出显示 ...

  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
//当然还需要加宽度width属来兼容部分浏览。

实现多行文本溢出显示...

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;

• 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

  • 1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
  • 2、display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  • 3、-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

改变placeholder的字体颜色大小

input::-webkit-input-placeholder {
    /* WebKit browsers */
    font-size:14px;
    color: #333;
}
input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-size:14px;
    color: #333;
}
input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    font-size:14px;
    color: #333;
}