CSS3玻璃流光特效
<!-- HTML代码片段中请勿添加<body>标签 //--> <div id="container"> <div class="image"> <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; } }
.