效果展示:
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>