• 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;
    }
  • 相关阅读:
    数据库 proc编程三
    数据库 Proc编程二
    数据库 Proc编程一
    数据库 Oracle数据库对象二
    Your local changes to the following files would be overwritten by merge: ... Please, commit your changes or stash them before you can merge
    生活感悟关键字
    科3
    NGINX 健康检查和负载均衡机制分析
    django模板里关闭特殊字符转换,在前端以html语法渲染
    django 获取前端获取render模板渲染后的html
  • 原文地址:https://www.cnblogs.com/10manongit/p/13041423.html
Copyright © 2020-2023  润新知