在CSS转换结束时跳转

当我将鼠标悬停在div上时，.note span淡入。淡入后，字体粗细似乎突然增加(变粗)。我意识到在小提琴中没有图像，但它不需要看到我的问题。

Html:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js"></script>
    <title>Cool Effect</title>
</head>
<body>
    <div class="imageHolder">
        <img src="picture1.jpeg">
        <span class="note">Hello!</span>
    </div>
</body>
</html>

CSS:

.imageHolder {
    position: relative;
    top:300px;
    left: 300px;
    width: 300px;
    height: 250px;
    text-align: center;
    overflow: hidden;
    background-color: black;
}
.note {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 2px solid white;
    padding: 8px;
    color: white;
    font-size: 24px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
img {
    width: 300;
    opacity: 1;
    height: 250px;
}
.imageHolder:hover .note {
    opacity: 1;
}

谢谢。

使用3d变换(即使用硬件加速)修复了许多这些渲染问题。

.note {
    ...
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    ...
}

这是有据可查的

演示

或者，这似乎也适用于您的示例，并且可能有更好的浏览器支持…

.note {
    ...
    -webkit-backface-visibility: hidden;
    ...
}

演示

注意这些变化:

.note {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 2px solid white;
    padding: 8px;
    color: white;
    font-size: 24px;
    opacity: 0;
    -webkit-transition: opacity 0.1s;             <--
    transition: opacity 0.1s;                     <--
}

虽然转换速度稍快，但这解决了小提琴中的问题。

相关内容

最新更新

热门标签：