简体   繁体   English

CSS3越野车悬停/过渡效果

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM