• 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;
    }
  • 相关阅读:
    【Python3网络爬虫开发实战】 1-开发环境配置
    Elasticsearch 基本介绍及其与 Python 的对接实现
    深度学习 GPU环境 Ubuntu 16.04 + Nvidia GTX 1080 + Python 3.6 + CUDA 9.
    React组件方法中为什么要绑定this
    中级前端开发推荐书籍
    20万行代码,搞得定不?
    华为云数据库TaurusDB性能挑战赛,50万奖金等你来拿!
    00036_private
    使用spring等框架的web程序在Tomcat下的启动顺序及思路理清
    http304状态码缓存设置问题
  • 原文地址:https://www.cnblogs.com/10manongit/p/13041423.html
Copyright © 2020-2023  润新知