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,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; } }
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
