HTML5 For Windows Store学习（3）

页面布局与效果，变形和动画

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

 暂空

 

 

posted @ 2013-07-23 19:47  valentine is me  阅读(187)  评论(0)  编辑  收藏  举报