关于CSS3的一些用法,持续更新。。
1、css3实现图片划过一束光闪过效果
-
<a href="#" class="img"><img src="" width="800"></a>
.img { display:block; position: relative; width:800px; height:450px; margin:0 auto; } .img:before { content: ""; position: absolute; width:200px; height: 100%; 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) } .img:hover:before { left: 150%; transition: left 1s ease 0s; }
2、垂直对齐
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
3、背景渐变动画
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
button { background-image: linear-gradient(#5187c4, #1c2f45); background-size: auto 200%; background-position: 0 100%; transition: background-position 0.5s; } button:hover { background-position: 0 0; }
4、表格列宽自适用----对于表格,当谈到调整列宽时,是比较痛苦的。然后,这里有一个可以使用的技巧:给td
元素添加 white-space: nowrap;
能让文本正确的换行
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
td { white-space: nowrap; }
5、包裹长文本---如果你碰到一个比自身容器长的文本,这个技巧对你很有用。在这个示例中,默认时,不管容器的宽度,文本都将水平填充。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
pre { white-space: pre-line; word-wrap: break-word; }