html的图片动态效果,用CSS3实现图片动态效果

一.用CSS3的好处

1.使用简单，易于学习

2.性能相对优化

二.学习前需要了解的知识

html5基本语法

css3基本用法

三.页面效果展示

效果图片展示

如图片所示(这里以网上书城系统为例)，当鼠标滑过书本(中间书)时，书的图片放大，并且会从左边滑过标签显示书目的价格，简介，作者等信息。当鼠标移开就恢复原状。(如图，左右两边的为初始状态，中间的为鼠标滑过的状态)

四.主要内容

1.掌握figure以及figcaption的基本用法

2.熟练掌握transform的基本属性及其用法

3.通过transition和transform配合制作简单的动画

五.属性及其代码介绍

(1)figure和figcaption(HTML)

figure标签：用于规定独立的内容，好比一个容器，用来存放图像，图表，照片等

figcaption标签：和figure一起使用，主要是用来定义figure标签的标题。

(2)transform和transition(CSS属性)

transform：