这些代码主要实现的功能就是一些2D的动画效果，如平移动画，旋转动画等等。
HTML5代码：
<span style="font-size:18px;"><!doctype html><html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"> <link href="style.css" type="text/css" rel="stylesheet"><title>动画效果</title></head><body><figure class="test1"><img src="img/1.jpg"><figcaption><h2>平移动画</h2><p>图片描述</p><p>图片描述</p><p>图片描述</p></figcaption></figure><figure class="test2"><img src="img/2.jpg"><figcaption><h2>旋转动画</h2><p>图片描述</p><div></div></figcaption></figure><figure class="test3"><img src="img/1.jpg"><figcaption><h2>斜切动画</h2><p>图片描述</p><p>图片描述</p><p>图片描述</p></figcaption></figure><figure class="test4"><img src="img/2.jpg"><figcaption><h2>缩放动画</h2><div></div></figcaption></figure></body></html></span>
CSS3代码：
<span style="font-size:18px;">@charset "utf-8";*{margin:0px;padding:0px;}figure{position:relative;width:33.33%;height:350px;overflow:hidden;float:left;}figcaption{position:absolute;top:0px;left:0px;color:#FFF;font-family:"微软雅黑";margin:5px 10px;}@media screen and (max-width:600px){figyre{width:100%}}@media screen and (min-width:601px) and (max-width:1000px){figure{width:50%}}@media screen and (min-width:1001px){figure{width:33.33%}}figure figcaption p,h2,div{transition:all 0.35s;}figure img{transition:all 0.35s;opacity:0.8;}.test1{background:#2f0000;}.test1 figcaption p{background:#fff;color:#333;margin:5px;text-align:center;transform:translate(-130px,0px);}.test1 figcaption{padding:20px;}.test1:hover figcaption p{transform:translate(0px,0px);}.test1 figcaption p:nth-of-type(1){ transition-delay:0.05s;}.test1 figcaption p:nth-of-type(2){ transition-delay:0.1s;}.test1 figcaption p:nth-of-type(3){ transition-delay:0.15s;}.test1:hover img{transform: translate(-50px,0); opacity:0.5;}.test2{background:#030;}.test2 figcaption{width:100%;height:100%;}.test2 figcaption h2{margin-left:15%;margin-top:15%;}.test2 figcaption p{margin-left:15%; transform:translate(0px,50px);opacity:0;}.test2 figcaption div{border:2px solid #FFF;width:80%;height:80%;position:absolute;top:10%;left:10%;transform:translate(0px,-350px) rotate(0deg);}.test2:hover figcaption div{transform:translate(0px,0px) rotate(360deg);}.test2:hover img{opacity:0.5;transform:translate(-50px,0px);}.test2:hover figcaption p{transform:translate(0px,0px);opacity:1;}.test3{background:#F30;}.test3 figcaption{top:30%;left:15%;}.test3 figcaption p{ transform:skew(90deg);}.test3 figcaption h2{ transform:skew(0deg);}.test3:hover figcaption p{ transform:skew(0deg); transition-delay:0.1s;}.test3:hover figcaption h2{ transform:skew(90deg);}.test3:hover img{opacity:0.5; transform:translate(-50px,0px);}.test4{background:#030;}.test4 figcaption{width:100%;height:100%;}.test4 figcaption div{width:80%;height:80%;border:2px solid #fff;position:absolute;top:8%;left:8%;opacity:0;}.test4 figcaption h2{margin-top:20%;margin-left:15%;opacity:1;}.test4:hover figcaption div{ transform:scale(1.2,1.2);opacity:1;}.test4:hover img{ transform:scale(1.2,1.2);opacity:0.5;}.test4:hover figcaption h2{ transform:scale(1.2,1.2);opacity:0.5;}</span>
