Question

我遇到了在页面加载时触发css 过渡的问题。基本上，自定义背景从页面加载的顶部（开始位置）下降的花式链接存在问题。您可以看到示例here。

只有在页面上同时包含输入和 a 标记时才会出现这些问题，因此如果我们删除输入，一切都会好的。解决这个问题的另一种方法是不使用外部css文件：它适用于jsbin，但它并没有真正帮助，因为我想了解为什么会发生这种情况。

我有以下代码：

HTML：

<head>
    <link rel="stylesheet" type="text/css" href="signin.css">
    <title>Dobrotech</title>
</head>
<body>
    <input type="password" name="password" required=""/>
    <a href="">forgot password?</a>
</body>

CSS：

a{
    padding: 0 0 5px 0;
    background: url(/dobro.tech/images/link.jpg) repeat-x bottom;
    background-size: 70% 5px;
    text-decoration: none;
}

a:hover {
    background: url(/dobro.tech/images/activelink.jpg) repeat-x bottom;
    background-size: 70% 12px;
}

a {
    transition: background-size 0.5s ease-in, background 0.5s ease-in;
}

a:hover {
    transition: background-size 0.1s linear, background 0.1s linear;
}

更新：我决定在伪类之前使用::重新制作这个链接效果，问题已经消失，但我仍然想弄清楚导致链接和输入交互的原因

Answer 1

试试这个

a{
padding: 0 0 5px 0;
background: url(dobro.tech/images/link.jpg) repeat-x bottom;
background-size: 70% 5px;
text-decoration: none;
}

a:hover {
background: url(dobro.tech/images/activelink.jpg) repeat-x bottom;
background-size: 70% 12px;
}

我从背景网址中删除第一个 /

download my sample

在页面加载时触发的动画

1 个答案: