在页面加载时触发的动画

我遇到了页面加载时触发的css 转换的问题。基本上，在页面加载时，自定义背景从顶部（开始位置）掉落的花式链接存在问题。您可以看到示例here。如果有两个输入和在页面上标签，所以如果我们删除输入一切都会好起来在页面加载时触发的动画

这些问题只发生。解决此问题的另一种方法是不使用外部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; 
}

更新：我已经决定重拍使用::在此之前链接效果伪类和问题已经消失，但我仍然想知道是什么原因链接和输入互动，很勉强

来源

2017-02-22 Forgetable

试试这个

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

来源

2017-02-22 05:43:44

谢谢你的答案，但它并没有为我工作。 /dobro.tech等于C：/dobro.tech。即使像img这样的外部链接（https://pp.vk.me/c638630/v638630595/257aa/NivvXatQk-k.jpg）也无济于事。 – Forgetable

在页面加载时触发的动画

回答

相关问题