css3

2bdenny 发布于2019-08-30 14:21 / 2588人阅读

摘要：实现单行文本溢出显示当然还需要加宽度属来兼容部分浏览。为了实现该效果，它需要组合其他的属性。常见结合属性必须结合的属性，将对象作为弹性伸缩盒子模型显示。

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;
}

GPU云服务器云服务器 css3 css3气泡 css3动画 JS+CSS3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115963.html

CSS重塑计划（一）：选择符

摘要：重塑计划一选择符元素选择符通配选择符，选择所有元素对象。选择符，以唯一标识符属性等于的对象作为选择符。选择具有属性且属性值为包含的字符串的元素。伪类选择符设置超链接在未被访问前的样式。仅用于规则匹配不含有选择符的元素。 CSS重塑计划（一）：选择符元素选择符 *通配选择符(Universal Selector)，选择所有元素对象。E类型选择符(Type Selector)，以文档语言...

lx1036 2019-08-29 12:23 评论0 收藏0
前端面试题-渐进增强和优雅降级

摘要：一背景介绍渐进增强和优雅降级这两个概念是在出现之后火起来的。二概念理解渐进增强渐进增强一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果交互追加功能达到更好的体验。一、背景介绍渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器...

HollisChuang 2019-08-30 14:10 评论0 收藏0
杂谈：渐进增强与优雅降级

摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

hiyang 2019-08-29 16:12 评论0 收藏0
杂谈：渐进增强与优雅降级

摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

王军 2019-08-23 10:29 评论0 收藏0
杂谈：渐进增强与优雅降级

摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

SimonMa 2019-08-02 11:03 评论0 收藏0