网站常用的几种动态显示信息效果

由于技术快速发展，静态页面已吸引不了用户眼光，所以网站增加一些动画效果，不仅可以使客户眼前一亮，也能提高体验互动；本文主要介绍下面五种效果： 1.（效果图第一行图1）鼠标浮动到图片上面，图片慢慢透明化，同时文字和边框慢慢显示（文字上下移动动态效果，边框沿边框线显示的动态效果）； 2.（效果图第一行图2）鼠标浮动到图片上面，图片慢慢放大，同时遮罩层和文字慢慢显示（文字上下移动动态效果）； 3.（效果图第二行图1）鼠标浮动到图标上面，往图标上面慢慢翻页显示一本书； 4.（效果图第二行图2）鼠标浮动到图标上面，往图标上面先左右延伸底部边框线，然后慢慢往上滑动显示文字内容； 5.（右边快捷菜单）鼠标浮动到图标上面，先慢慢消失文字层，然后往左边慢慢显示出四个按钮。

6、右边快捷菜单实现过程，详细步骤如下（主要分析跟动态效果有关的代码）： 1.默认状态下（transition产生慢慢变化过程，不显得突兀）： 图标（ico荏鱿胫协n）设置了背景颜色（background-color）动画过渡0.5s、圆角边框（border-radius）动画过渡0.5s延迟0.25s和外边距（margin）动画过渡0.5s延迟0.25s，且速度都为先快后慢（ease-out）（transition: background-color .5s ease-out, border-radius .5s .25s ease-out, margin .5s .25s ease-out）； 文字层（label）遮住四个图标，且设置了透明度（opacity）动画过渡0.5s速度先快后慢延迟0.75s（transition: opacity 0.5s ease-out 0.75s）。 2.鼠标浮动到图片上（效果图如图5）： 文字层（label）慢慢消失过程中，图标（icon）才慢慢往左移动展开，且图标（icon）背景色和圆角边框也根据相应设置慢慢变化，形成一个很柔顺的过程。 3.鼠标离开图片： 由于设置了延迟时间，所以整个恢复过程是图标（icon）慢慢往右移动收起过程中，文字层（label）才慢慢显示出来。