• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

css3中transition hover中的书写顺序差异

当前位置：网站建设 > 技术支持

你是不是不知道在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没有任何过 渡。

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。