效果展示：
CSS代码：
<style type="text/css" media="screen">
.main {
margin:10px auto;
text-align:center;
overflow:hidden;
}
ul, li {list-style:none;}
.product {
width: 264px;
padding: 5px;
margin: 5px;
position: relative;
float: left;
}
.product > img {
max-width: 100%;
display: block;
position: relative;
cursor:pointer;
}
.product:hover .product-hover,
.product:active .product-hover {opacity: 1;}
.product-hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
/* 设置透明 */
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
/* 设置线性渐变 */
background-size: 30px 30px;
background-image: -webkit-linear-gradient(45deg, blue 25%, transparent 25%, transparent 50%, rgba(234, 176, 176, 1) 50%, blue 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, blue 25%, transparent 25%, transparent 50%, blue 50%, blue 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(45deg, blue 25%, transparent 25%, transparent 50%, blue 50%, blue 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, blue 25%, transparent 25%, transparent 50%, blue 50%, blue 75%, transparent 75%, transparent);
/* 动画 */
-webkit-animation: barberpole 0.5s linear infinite;
-moz-animation: barberpole 0.5s linear infinite;
animation: barberpole 0.5s linear infinite;
}
/* barberpole动画 */
@-webkit-keyframes barberpole {
from {background-position: 0 0;}
to {background-position: 60px 30px;}
}
@-moz-keyframes barberpole {
from {background-position: 0 0;}
to {background-position: 60px 30px;}
}
@-ms-keyframes barberpole {
from {background-position: 0 0;}
to {background-position: 60px 30px;}
}
@keyframes barberpole {
from {background-position: 0 0;}
to {background-position: 60px 30px;}
}
</style>html代码：
<div class="main"> <ul> <li class="product"> <div class="product-hover"></div> <img src="images/1.jpg"> </li> <li class="product"> <div class="product-hover"></div> <img src="images/2.jpg"> </li> <li class="product"> <div class="product-hover"></div> <img src="images/3.jpg"> </li> </ul> </div>
