页面布局与效果，变形和动画
1.变形
使用图片进行旋转、平移、倾斜以渐变效果
<body>
<figure id="pic"><!-- <figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。-->
<img src="/imgs/雀儿山.jpg" alt="code by valentine" />
<figcaption>code by valentine</figcaption><!-- <figcaption> 标签定义 figure 元素的标题（caption）。-->
</figure>
</body>
css
#pic {
margin-left:300px;
margin-top:300px;
transition:2s;/*2秒钟变形到最终效果*/
}
#pic:hover {/*光标悬停*/
transform:scale(2) translate(50px,100px) rotate(10deg)/*放大2倍，偏移50，100像素，倾斜10度*/
}
效果（渐变效果无法用图片展示）：
2.动画Animatiion
暂空