<!DOCTYPE html>
<html>
<head>
<style>
div
{
transition:after 3s;
-webkit-transition:after 3s;
}
div:hover:after
{
content:"- positive!";
}
</style>
</head>
<body>
<div>Test</div>
</body>
</html>
我上面有这个示例代码.我正在尝试使用"过渡"这样的文字:' - 正面!' 滑动/显示需要3秒钟.但它不起作用..如何解决？
3dg*_*goo 45
after不是有效值transition.
而是transition作为:after选择器的属性.
HTML
<div>Test</div>
CSS
div:after {
content:" - positive!";
position: relative;
opacity: 0;
top: -20px;
-webkit-transition: all 3s;
transition: all 3s;
}
div:hover:after {
opacity: 1;
top: 0px;
}
您还可以在悬停状态和悬停状态下进行不同的转换.这允许我们延迟显示伪元素但没有延迟来隐藏它.
CSS
div:after {
content:" - positive!";
position: relative;
opacity: 0;
top: -20px;
-webkit-transition: all 250ms;
transition: all 250ms;
}
div:hover:after {
opacity: 1;
top: 0px;
-webkit-transition: all 3s;
transition: all 3s;
}
以下是支持伪元素转换的浏览器列表:http: //css-tricks.com/transitions-and-animations-on-css-generated-content/
| 归档时间： |
|
| 查看次数： |
45621 次 |
| 最近记录： |