transform动画
KOF2003_耗子
2015-12-05 16:04
transform动画用hover触发结束，鼠标移开为什么会“蹦”回去，而不是平滑回去的。
3回答
-
- 霞_霞
- 2015-12-10 10:03:59
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div,p{padding: 0;margin:0;}
.u{width:100px; height:100px;position:relative; left:50%; top:100px;}
.f{width:100px; height:100px; background-color:#0F0;transition:all 5s;}
p{ position:absolute; width:70px; height:20px; color: #000; top:40%; left:15%;opacity:0;transform:translate(0px,50px);transition:all .5s;}
.u:hover .f{transform:rotate(360deg);background-color:#90C;opacity: 0}
.u:hover p{transition-delay:4.5s; opacity:1;transform:translate(0px,0px);}
</style>
</head>
<body>
<div class="u">
<div class="f"></div>
<p>点击观赏</p>
</div>
</body>
</html>
根据你的思路改的，之前不可以的原因是.u:hover的透明度为0的同时，p标签也透明了，所以看不见了，而且鼠标移上去p标签的动画也应该加在u:hover p{}上，不是直接加在p:hover上，还有动画延迟写错了，是transition-delay
-
- KOF2003_耗子
- 2015-12-05 20:16:17
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body,div{margin:0; padding:0; transition:all 5s;}
.u{width:100px; height:100px; background-color:#0F0; position:relative; left:50%; top:100px;}
.u:hover{ transition:all 5s; background-color:#90C; opacity:0.0;}
.u:hover{ transform:rotate(360deg);}
p{ position:absolute; width:70px; height:20px; color: #000; top:40%; left:15%;}
p{ transform:translate(0px,50px); opacity:0;}
p:hover{ transform:translate(0px,0px);}
p:hover{animation-delay:5s; opacity:1;}
</style>
</head>
<body>
<div class="u">
<p>点击观赏</p>
</div>
</body>
</html>
要是还能解决其他问题就太好了
-
- 化龙贝
- 2015-12-05 18:43:32
代码发出来
CSS3图片动态提示效果
53881 学习 · 149 问题