CSS3玻璃流光特效

2018-02-03 10:27:41来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

CSS3玻璃流光特效

<!-- HTML代码片段中请勿添加<body>标签 //--><div ><div >  <img src="http://ww4.sinaimg.cn/mw600/005vbOHfgw1ercvg85sr0j30jg0t6tdq.jpg" alt="Hello World" />      <em></em></div></div><!-- 推荐开源CDN来选取需引用的外部JS //--><script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>

 

/*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, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));  -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));  -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));  -o-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 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; }}

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台