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

电玩女神 2022-02-26 11:34 836阅读 0赞

由于技术快速发展，静态页面已吸引不了用户眼光，所以网站增加一些动画效果，不仅可以使客户眼前一亮，也能提高体验互动；本文主要介绍下面五种效果：

1.（效果图第一行图1）鼠标浮动到图片上面，图片慢慢透明化，同时文字和边框慢慢显示（文字上下移动动态效果，边框沿边框线显示的动态效果）；

2.（效果图第一行图2）鼠标浮动到图片上面，图片慢慢放大，同时遮罩层和文字慢慢显示（文字上下移动动态效果）；

3.（效果图第二行图1）鼠标浮动到图标上面，往图标上面慢慢翻页显示一本书；

4.（效果图第二行图2）鼠标浮动到图标上面，往图标上面先左右延伸底部边框线，然后慢慢往上滑动显示文字内容；

5.（右边快捷菜单）鼠标浮动到图标上面，先慢慢消失文字层，然后往左边慢慢显示出四个按钮。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70][]

### HTML代码 ###

html代码这一块，都是一些简单排版，详细代码可自行查看下图。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1][]

![20190329171449469.jpg][]

### CSS代码 ###

本文的实例都是由css代码实现，所以这一块是本文的重点，下面按实例顺序一个个分析实现的过程。

效果图第一行图1实现过程，详细步骤如下（主要分析跟动态效果有关的代码）：

1.默认状态下（transition产生慢慢变化过程，不显得突兀）：

图片（img）设置了透明度（opacity）动画过渡0.3s（transition）；              边框线（border）设置了透明度（opacity）和动作（transform）动画过渡0.5s（transition）且边框线对应方向收缩（左右y轴收缩scale3d(1, 0, 1)、上下x轴收缩scale3d(0, 1, 1)）；

元素h2的文字设置了动作（transform）动画过渡0.3s（transition）且文字往上移动20px（translate3d(0, -20px, 0)）；

元素p的文字设置了动作（transform）动画过渡0.3s（transition）且文字往下移动20px（translate3d(0, 20px, 0)）。

2.鼠标浮动到图片上（效果图如图4）：

图片（img）的透明度（opacity）慢慢变为0.4（opacity: .4）；

边框线（border）的左右线都是慢慢从中间往两边伸长，而上下线都是慢慢从中间往上下伸长，最终边框四点连接一起成一个正方形（opacity: 1和transform: scale3d(1, 1, 1)）；

元素h2的文字往下移动20px（transform: scale3d(0, 0, 0）；

元素p的文字往上移动20px（opacity: 1和transform: scale3d(0, 0, 0）。

3.鼠标离开图片：

所有元素按设置的动画过渡恢复原来的排版。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 5][]

效果图第一行图2实现过程，详细步骤如下（主要分析跟动态效果有关的代码）：

1.默认状态下（transition产生慢慢变化过程，不显得突兀）：

图片（img）设置了动作（transform）动画过渡0.3s（transition）；

元素i的“+”设置了动作（transform）动画过渡0.3s（transition）且文字往上移动20px（translate3d(0, -20px, 0)）；

元素p的文字设置了动作（transform）动画过渡0.3s（transition）且文字往下移动20px（translate3d(0, 20px, 0)）。

2.鼠标浮动到图片上（效果图如图4）：

图片（img）慢慢放大1.5倍（scale3d(1.5, 1.5, 1.5)）；

元素i的“+”往下移动20px（opacity: 1和transform: scale3d(0, 0, 0）；

元素p的文字往上移动20px（opacity: 1和transform: scale3d(0, 0, 0）。

3.鼠标离开图片：

所有元素按设置的动画过渡恢复原来的排版。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 9][]

效果图第二行图1实现过程，详细步骤如下（主要分析跟动态效果有关的代码）：

1.默认状态下（transition产生慢慢变化过程，不显得突兀）：

文本的整个区域（flip-content）设置了所有（all）动画过渡0.3s（transition）且透明度为0（opacity: 0）、整个区域两边沿y轴旋转90度合拢且向下移动15px（rotate3d(0, 1, 0, 90deg) translate3d(0, 15px, 0)）。

2.鼠标浮动到图片上（效果图如图4）：

文本的整个区域慢慢往上移动过程并向两边打开（opacity: 1和transform: scale3d(1, 1, 1），从而形成打开书的效果。

3.鼠标离开图片：

所有元素按设置的动画过渡恢复原来的排版。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 11][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 12][]

![20190401103913929.jpg][]

效果图第二行图2实现过程，详细步骤如下（主要分析跟动态效果有关的代码）：

1.默认状态下（transition产生慢慢变化过程，不显得突兀）：

文本的整个区域（line-content）设置了透明度（opacity）动画过渡0.3s延迟0.3s（transition: opacity .3s .3s）且透明度为0（opacity: 0）；

底部白线（line-text）设置了动作（transform）动画过渡0.3s延迟0.3s（transition: transform .3s .3s）且x轴缩放为0（transform: scale3d(0, 1, 1)）；

文字区域（line-inner）设置了动作（transform）动画过渡0.3s（transition: transform .3s）且往下移动100%全部隐藏（transform: translate3d(0, 100%, 0)）。

2.鼠标浮动到图片上（效果图如图3）：

由于鼠标浮动到图片上设置了文本的整个区域（line-content）和底部白线（line-text）延迟为0，而文字区域（line-inner）延迟为0.3s，所以先是显示白色倒三角形，然后底部边框线往两边延长，最后再往上滑动显示内容，形成一个很顺畅的流程效果。

3.鼠标离开图片：

由于设置了延迟时间，所以整个恢复过程是先往下滑动隐藏内容，然后底部白线往中间收缩，最后隐藏白色倒三角形。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 13][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 14][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 15][]

右边快捷菜单实现过程，详细步骤如下（主要分析跟动态效果有关的代码）：

1.默认状态下（transition产生慢慢变化过程，不显得突兀）：

图标（icon）设置了背景颜色（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）才慢慢显示出来。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 16][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 17][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 18][]

![20190401104227965.jpg][]

### 注意事项 ###

transition和transform都存在不同浏览器兼容问题，本文只是写了chrome的兼容，其它浏览器的样式记得补全；

本文都是使用3d（scale3d、translate3d等），有利于提高性能。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70]: /images/20220226/c6a47e76589342419c2b38445963a1b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1]: /images/20220226/f53cfb9e03ba4873906734beef600dd2.png
[20190329171449469.jpg]: /images/20220226/0b87dea06783426da4477e256fee3a96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 2]: /images/20220226/d53f78ba55bd40c0bc5fdf255e09ad22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 3]: /images/20220226/4d64fab839ec4e47b6443f65527e9d00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 4]: /images/20220226/21bb277d21544309aabab5d90bee2470.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 5]: /images/20220226/b24acbb71dc24bc6ade089341576f39d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 6]: /images/20220226/452fbbf9251d4b5cbb5a2a3499bfe3d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 7]: /images/20220226/432f93669ef44480aded86a0160afad2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 8]: /images/20220226/3f1a99a220324d9bbde4708197746741.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 9]: /images/20220226/dbd64e8ba34b4590a16efbb1d701ef34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 10]: /images/20220226/ba1e4e3690944b98809cd8388cdf2ae0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 11]: /images/20220226/790287ec323845eeb71080e90532fa92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 12]: /images/20220226/1e00082e40014d2eb94e9ad70b4eefdd.png
[20190401103913929.jpg]: /images/20220226/43da9a1654bb49d8a79042d5f6084184.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 13]: /images/20220226/db52e3e7b2d146c3a0f689247deb3639.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 14]: /images/20220226/925da876a6e8482bac1d301d5f1b3561.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 15]: /images/20220226/f02aaa738c4b401781cd994f50c2ea31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 16]: /images/20220226/eaa6b4c1b6d34c028711028634b29392.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 17]: /images/20220226/32e6fb72ae204d01aca0c2edb84f5d38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 18]: /images/20220226/e49c9d2dce334a4fb4d132a5f5bd1390.png
[20190401104227965.jpg]: /images/20220226/9c119cce5e7443a4985296496d26a232.png