html 边框四周闪光的效果,css3实现条纹边框效果

效果展示：

CSS代码：

.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;}

}

html代码：

•   

•   

•