这是第1格
这是第2格
这是第3格
这是第4格
这是第5格
这是第6格
这是第7格
这是第8格
/*
* 模糊图片鼠标悬停清晰
*/
#ul1 {
width:1040px;
margin:40px auto;
}
#ul1 li {
width:200px;
height:200px;
background:white;
float:left;
margin:10px;
list-style:none;
padding:20px;
box-shadow:2px 2px 2px #999;
-webkit-transition:0.5s all linear;
-moz-transition:0.5s all linear;
-ms-transition:0.5s all linear;
-o-transition:0.5s all linear;
}
#ul1 li h2 {
font-size:24px;
line-height:40px;
}
#ul1 li p {
font-size:12px;
line-height:18px;
}
#ul1 .back {
text-shadow:0 0 10px black;
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-ms-transform:scale(0.9);
-o-transform:scale(0.9);
box-shadow:0 0 10px 4px white;
opacity:0.8;
color:rgba(0,0,0,0);
}
#ul1 .active {
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:3px 3px 4px #888;
}
/*
* 模糊图片鼠标悬停清晰
*/
#ul1 {
width:1040px;
margin:40px auto;
}
#ul1 li {
width:200px;
height:200px;
background:white;
float:left;
margin:10px;
list-style:none;
padding:20px;
box-shadow:2px 2px 2px #999;
-webkit-transition:0.5s all linear;
-moz-transition:0.5s all linear;
-ms-transition:0.5s all linear;
-o-transition:0.5s all linear;
}
#ul1 li h2 {
font-size:24px;
line-height:40px;
}
#ul1 li p {
font-size:12px;
line-height:18px;
}
#ul1 .back {
text-shadow:0 0 10px black;
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-ms-transform:scale(0.9);
-o-transform:scale(0.9);
box-shadow:0 0 10px 4px white;
opacity:0.8;
color:rgba(0,0,0,0);
}
#ul1 .active {
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:3px 3px 4px #888;
}
在css3样式中可以调整大小和模糊程度之类的