css3实现条纹边框效果

2263

效果展示:

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>

玄玄博客 http://www.blogxuan.com/