`

Css translate3d 文字模糊的bug,解决之道

    博客分类:
  • CSS
阅读更多

问题原因:

css transform translate3d导致字体模糊,目前已知bug,chrome暂未解决

当元素进入GPU中渲染时,在Chrome35+中的字体为grayscale渲染,IE11和FF30保持sub-pixel渲染不变。若transform值函数(如translate3d(), scale(), rotate()等)中的参数为非整数,会导致字体模糊。

 

例如:transform: translate3d(82.5px, 0px, 0px);

由于translate3d的x的值为非整数导致文字不清晰,见图:

 

目前变相解决方案:

transform: translate3d(82px, 0px, 0px);

所有参数使用正整数可解决,如图

 


更多实例应用扫码体验:

  • 大小: 56.4 KB
  • 大小: 61.9 KB
分享到:
评论

相关推荐

    css3彩色3D文字上下漂浮动画特效

    【CSS3彩色3D文字上下漂浮动画特效详解】 在网页设计中,吸引用户的注意力是至关重要的,而动态效果往往能起到很好的引导和装饰作用。本篇将详细讲解如何使用CSS3来创建一款彩色3D文字上下漂浮的动画特效,这种特效...

    HTML5 CSS3实现3D感极强的彩色立体文字.rar

    HTML5 CSS3实现3D感极强的彩色立体文字源码,这个效果超赞啊,这种三维风格我很喜欢,而且颜色很鲜艳,当然了,字符的颜色可以自己定义,具体请参见HTML演示文件,文字内容的自定义也很方便,在HTML中输入文字内容...

    CSS3实现3D卡通文字效果

    本教程将深入探讨如何使用CSS3来实现3D卡通文字效果,这种效果可以为网页增添独特的视觉魅力,吸引用户的注意力。通过理解和实践以下知识点,你将能够创建出自己的3D卡通文字特效。 1. **CSS3选择器**:在实现3D...

    CSS3文字变形3D阴影效果

    CSS3文字变形3D阴影效果,纯CSS3代码,3D文字,文字阴影特效。

    css3图片3D翻转显示文字信息特效

    本知识点主要聚焦于一个实用的应用——“CSS3图片3D翻转显示文字信息特效”。这个特效使得图片在翻转过程中可以展现出隐藏的文字信息,从而增加用户交互体验,提升网站或应用的视觉吸引力。 首先,我们要理解CSS3中...

    CSS3 3D文字拉伸发光动画特效.rar

    【标题】"CSS3 3D文字拉伸发光动画特效.rar"所涉及的知识点主要集中在CSS3的新特性上,特别是3D变换、动画以及文本效果。CSS3是CSS(层叠样式表)的第三版,引入了许多增强网页设计的功能,使得开发者能够创建更加...

    css3文字标签云3D旋转特效.rar

    css3文字标签云3D旋转特效.rar css3文字标签云3D旋转特效.rar css3文字标签云3D旋转特效.rar css3文字标签云3D旋转特效.rar css3文字标签云3D旋转特效.rar css3文字标签云3D旋转特效.rar css3文字标签云3D旋转特效....

    HTML5_CSS3 3D文字特效 文字外翻效果应用模板.zip

    同时,translate3d()和scale3d()函数可能用于调整元素的位置和大小,以实现外翻效果。配合perspective属性,可以设置观察者的视点,使3D效果更加逼真。 此外,CSS3的transition属性可以平滑地过渡到变换状态,而...

    纯css3 transform文字变形3D阴影效果代码

    在本主题中,我们将深入探讨如何使用CSS3的`transform`属性来实现文字的3D变形和阴影效果。`transform`属性允许我们对元素进行旋转、缩放、移动和倾斜等变换,从而创造出丰富的视觉效果。 首先,让我们理解`...

    CSS3 SVG 3D立体阴影文字动画特效

    **CSS3 SVG 3D立体阴影文字动画特效详解** 在现代网页设计中,动态效果和交互性已经成为提升用户体验的关键因素。CSS3与SVG(可缩放矢量图形)的结合,为实现这样的效果提供了强大的工具。本文将深入探讨如何利用...

    CSS3 3D立体文字变色发光动画特效

    **CSS3 3D立体文字变色发光动画特效详解** CSS3是层叠样式表的最新版本,它引入了许多强大的新特性,其中3D转换和动画功能为网页设计提供了无尽的可能性。本特效主要利用了CSS3的3D转换、渐变、动画以及盒阴影等...

    纯CSS3酷炫文字模糊效果特效.zip

    在前端开发领域,CSS3(层叠样式表第三版)为网页设计师提供了许多新的特性和功能,其中之一就是能够实现酷炫的文字模糊效果。这个“纯CSS3酷炫文字模糊效果特效.zip”压缩包中,很可能包含了一个示例项目,演示如何...

    css3d演示html

    1. **3D变换**:CSS3D的核心是3D变换,包括translate3D、rotate3D、scale3D等,它们可以在三维空间中移动、旋转和缩放元素。例如,`transform: translate3d(x, y, z)`可以在x、y、z轴上改变元素的位置。 2. **视口...

    css常用公共样式 与bug解决方案

    8. **Bug解决方案**:在实际开发中,可能会遇到各种CSS问题,如盒模型计算错误、浮动元素造成的塌陷、文字溢出等。理解并掌握这些常见bug的解决方法,可以提高工作效率。例如,使用`clearfix`类解决浮动元素引起的...

    CSS3 3D文字弹出动画特效.zip

    【标题】"CSS3 3D文字弹出动画特效.zip" 涉及的主要知识点是CSS3中的3D转换和动画效果,以及可能结合的jQuery库来实现更丰富的交互性。CSS3是层叠样式表的最新版本,它引入了许多新特性,包括3D变换,这使得网页元素...

    css3 3d立方体

    CSS3是层叠样式表(Cascading Style Sheets)的第三个主要版本,它引入了许多新的特性和功能,其中3D转换是其中一个引人注目的亮点。3D立方体的实现,利用了CSS3的transform属性,使网页元素能够在屏幕上呈现出三维...

    CSS3 3D文字关注动画特效.zip

    【CSS3 3D文字关注动画特效】是一个利用现代浏览器对CSS3特性的支持,创造出引人注目的视觉效果的代码资源。这个特效利用了CSS3的3D转换(3D Transforms)和动画(Animations)特性,为网页中的文本元素赋予了立体感...

    纯CSS3 3D动感文字动画特效.zip

    【标题】"纯CSS3 3D动感文字动画特效.zip" 涵盖了现代网页设计中的关键元素——CSS3的3D动画效果,特别是针对文字的动态展示。CSS3是层叠样式表(Cascading Style Sheets)的第三版,它引入了一系列强大的功能,包括...

    js css炫酷3d立体卡通文字特效.zip

    此外,为了实现更精细的3D控制,CSS3还提供了translate3d()、scale3d()和rotate3d()等函数,允许在3D空间中进行精确的平移、缩放和旋转。 在这个特效中,可能还会用到CSS3的过渡(transition)和动画(animation)...

Global site tag (gtag.js) - Google Analytics