html流光特效,CSS3玻璃流光特效

CSS3玻璃流光特效

alt="Hello World" />

/*CSS源代码*/

body{

background:#CFCFCF;

}

.image {

position: relative;

overflow:hidden;

width: 300px;

height: 450px;

}

img {

width:300px;

height: 450px;

}

em {

position: absolute;

display:block;

width: 200px;

height: 450px;

background:#fff;

top: 0;

left: -400px;

translate: -webkit-transform: skewY(25deg);

-moz-transform: skewX(-25deg);

-ms-transform: skewX(-25deg);

-o-transform: skewX(-25deg);

transform: skewX(-25deg);

background:linear-gradient(0deg,rgba(255,255,0),0.4),0));

-moz-linear-gradient(0deg,0));

-webkit-linear-gradient(0deg,0));

-o-linear-gradient(0deg,0));

}

.image:hover em {

left:400px;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-ms-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

}

}