CSS3篇 |
您所在的位置：网站首页 › 镜像翻转的图片文字后模糊怎么办 › CSS3篇 |
CSS3篇
|
小知识点：rotate/translate等导致字体瞬间模糊又还原，如何处理 用css3写了一个 旋转字体图标的方法，很简单的代码，如下： //css .icon-down { font-size: 18px; color: #19bd9b; transition: all 1s ease; -webkit-transition: all 1s ease; transform: rotate(0); -webkit-transform: rotate(0); } .icon-down.on { transform: rotate(-180deg); -webkit-transform: rotate(-180deg); } //html //js $(".select-box").click(function() { var t = $(this); var e = t.find(".select-option").css("display"); if("none" == e){ $(".select-box .select-option").css("display","none"); $(".select-box .select-value > i").removeClass("on"); t.find(".select-option").slideDown(); t.find(".select-value > i").addClass("on"); }else{ t.find(".select-option").slideUp(); t.find(".select-value > i").removeClass("on"); } });上面代码运行后，发现在与该代码毫无关系的一个节点的字体变模糊了一下，一秒后又还原了，作为强迫症患者，这肯定不能忍，后来发现是这句导致
1，将宽高设为了偶数，不行 2，增加css backface-visibility:hidden，不行。 3，translate里的参数用固定值不用百分比这些，我用rotate，这用不着。 4，给字体强制透明度，weight,并提高优先级，不行。 后来试着在代码里加了一句transform：translate3d(0,0,0)，然后就解决了。。。 .icon-down { display: block; font-size: 18px; color: #19bd9b; transition: all 1s ease; -webkit-transition: all 1s ease; transform: rotate(0); -webkit-transform: rotate(0); transform:translate3d( 0, 0, 0); -webkit-transform:translate3d( 0, 0, 0); } .icon-down.on { transform: rotate(-180deg); -webkit-transform: rotate(0); transform:translate3d( 0, 0, 0); -webkit-transform:translate3d( 0, 0, 0); } 后来发现将translateZ(0)代替 translate3d(0,0,0)也可以解决。 |
这句就只添加了名为on的class,其中只增减了一句rotate的代码，搜了搜，不只我一个人遇到了这个问题，好吧，css3的问题，按照大家的办法试了下。【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |