随身笔记
随身笔记

css3金属光泽效果

guangze
<style>
#wo{
 content: "";
 position: absolute;
 width: 80px;
 height: 350px;
 top: 0;
 left: -150px;
 overflow: hidden;
 background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
 background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));
 background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
 background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
 -webkit-transform: skewX(-25deg);
 -moz-transform: skewX(-25deg);
}
</style>


<div id="pa" style="position:relative; width:400px; height:400px; background:#000; overflow:hidden;">
 <div id="wo">
 </div>
</div>

 

 

 

 

 

 

随身笔记

css3金属光泽效果
<style> #wo{ content: ""; position: absolute; width: 80px; height: 350px; top: 0; left: -150px; overflow: hidden; background: -moz-linear-gradient(left…
扫描二维码继续阅读
2015-12-07