[英]CSS3 buggy hover/transition effect
I'm having a problem with hovering over links on my site. 我将鼠标悬停在网站上的链接上时遇到问题。 Note: I'm using white font on black background.
注意:我在黑色背景上使用白色字体。 I have several links--just typical
我有几个链接-只是典型的
<a href="link.com" target="_blank" class="ext_link">Click here</a>
My css: 我的CSS:
.ext_link {transition:0.5s; -webkit-transition:0.5s;}
.ext_link:hover {color:rgba(125, 249, 255, 1); opacity:0.75;}
When I hover over one of these links, the animation happens supper chunkily--it looks like the link starts going grey for a second, then suddenly turns that blue color without any transition. 当我将鼠标悬停在这些链接之一上时,动画会大块地出现在晚餐上-看起来该链接开始变灰一秒钟,然后突然变成了蓝色而没有任何过渡。 Then, when I take the mouse off, the process happens in reverse.
然后,当我取下鼠标时,该过程将反向进行。 The link abruptly turns grey and then fades back to its original white color.
链接突然变成灰色,然后变回原来的白色。
This is a new bug--my site was working fine up until two days ago. 这是一个新错误,直到两天前我的网站都可以正常工作。 Also note that this bug only happens on MY computer.
另请注意,此错误仅在我的计算机上发生。 When I access my site on anyone else's computer, the animation is working just fine.
当我在其他任何人的计算机上访问我的网站时,动画运行正常。
I've tried clearing the cache, restarting the browser, etc. 我尝试清除缓存,重新启动浏览器等。
I think now it's OK: 我认为现在可以:
check this [ LINK ] 检查此[LINK]
I don't see anything wrong here but sometimes for accelerating your transition you may add transform: translateZ(0)
with venders to your element. 我在这里没有发现任何问题,但是有时为了加快过渡速度,您可以添加
transform: translateZ(0)
向元素添加带有vertender的transform: translateZ(0)
。
body {
background: black;
}
.ext_link {
font-size: 5em;
color: white;
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ext_link:hover {
color:rgba(125, 249, 255, .75);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.