这里只是鼠标移入的时候出现的动态效果，并没有使用CSS的动画属性animation和变形属性transform。后面再补。。。
HTML代码如下：
<!DOCTYPE html>
<html><head lang="en"> <meta charset="UTF-8"> <title></title></head><link rel="stylesheet" type="text/css" href="font_edpqa2m2qpp3c8fr/iconfont.css"><link rel="stylesheet" href="index.css"><body><div id="main">// 每个li为一个框
<ul class="u1-items"> <li> <div class="first"><img class="first-img" src="images/480_yugao.jpg" alt=""/> <div class="items-icon"> <span><i class="iconfont icon-favorite"></i></span> <span><i class="iconfont icon-caigou"></i></span> </div> <div class="items-txt"> <h2><span class="items-txt1">WARM </span><span class="items-txt2">OSCAR</span></h2> </div> </div> </li> <li> <div class="second"> <img class="second-img" src="images/12.jpg"><h2><span>STRANGE</span><span>DEXTER</span></h2> <h3>Dexter had his own strange way. You could watch him training ants.</h3> <div class="items2-bd"> </div> </div> </li><li>
<div class="last"> <img src="images/1.jpg"> <h2><i class="iconfont icon-yinle"></i><span> Sweet </span><span>Marley</span></h2> <div class="last-bd"></div>
<div class="last-txt">
<p>Marley tried to convince her but she was not interested.</p> </div> </div> </li> </ul></div></body></html>Css代码：
#main ul li{
list-style-type: none; width:360px; height:360px; display: inline-block; padding:30px;}
ul li img{ width: 360px; height: 360px; position: absolute;}.items-icon{ position: absolute; margin-top: 300px; margin-left: 300px; z-index:1; opacity: 0; width: 100px; height: 100px; -webkit-transition: all 1s;}.second-img{ opacity: 0.9; -webkit-transition: all 1s;}.second:hover .second-img{ opacity: 1;}.items-txt:hover{ opacity:0;}.first:hover .items-icon{ opacity: 1;}.items-txt{ background-color: rgba(43,43,43,0.6); position:absolute; z-index: 2; width:360px; height: 360px; color: #fff; -webkit-transition: all 1s;}.items-txt h2{ margin-left:20px; margin-top:40px; display: inline-block;}.second:hover h3{ opacity: 1;}.second:hover .items2-bd{ margin-top:180px;}.second h3{ display: inline-block; position: absolute; color: #ffffff; font-size: 18px; width: 200px; margin-left: 70px; margin-top: 200px; opacity: 0; -webkit-transition: all 1s;}.last h2{
color: #ffffff; position: absolute; margin-left: 120px; margin-top: 90px; -webkit-transition: all 1s;}.last-txt{ opacity: 0; -webkit-transition: all 1s;}.last-bd{ border: 1px solid #ffffff; height: 5px; width: 300px; margin: 0 auto; position: absolute; background-color: #ffffff; margin-top: 150px; margin-left: 30px; opacity: 0; -webkit-transition: all 1s;}
.last-txt p{ color: #fff; font-weight: 400; margin-top: 200px; font-size: 25px; margin-left: 30px;}.last:hover h2{
margin-top:40px;}.last:hover .last-bd{ opacity: 1; margin-top:70px;}.last:hover .last-txt{ opacity: 1;}.last-txt { width:300px; text-align: right; position: absolute;}.last hr{ position:absolute;}.second h2{
display: inline-block; position:absolute; color: #ffffff; margin-left: 70px; margin-top: 60px;}.items2-bd{ display: inline-block; width:270px; height: 135px; border:10px solid #ffffff; position: absolute; margin-left: 35px; margin-top: 20px; -webkit-transition: all 1s;}