transition是css3中新添加的特性,在W3C标准中是这样描述 的:“css的transition允许css的属性值在一定的时间内从 一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并平滑的以动画效果改变css的属性值。”有了transition一切动画都变得如此简单。
在今天的小贴士,我们将向您展示如何让你的菜单添加一个整洁的悬浮效果。
主要就是设置图片的属性left 从0过度到300,透明度从0变到1:
.mh-menu li img{ position: absolute; z-index: 1; left: 0px; top: 0px; opacity: 0; transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out; } .mh-menu li:hover img{ left: 300px; opacity: 1; }