发布：2014/12/24 13:26:27作者：管理员 来源：本站 浏览次数：1554
你是不是不知道在CSS样式中该把transition写在hover中呢，还是写在普通状态里？
好，我们来看个示例：
代码如下：
html：
<button class="btn" id="btn1">demo1</button>
<button class="btn" id="btn2">demo2</button>
CSS
body { margin:20px; }
.btn { height:24px; width:60px; color:#fff; background:#333; font-size:16px; border:0 none;
border-radius:3px; }
#btn1 { }
#btn1:hover { color:#333; background:#eee; -webkit-transition:all 3s linear 0.5s;/*属性，持
续时间，动画方式，延迟时间*/ }
#btn2 { -webkit-transition:all 3s linear 0.5s;/*属性，持续时间，动画方式，延迟时间*/ }
#btn2:hover { color:#333; background:#eee; }
运行结果：
•从普通状态到悬浮状态时，两者效果一致，即normal->hover顺向动画过渡
•从悬浮到移开状态时，写在hover中的transition效果是一种切换（normal->hover顺向动画过
渡,hover->normal
逆向动画过渡），但是写在普通状态中的transition迅速消失，没有丝毫的delay，也就是说，从hover->normal没有任何过
渡。
© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4