首页 > 代码库 > 理解CSS Clip属性及用法
理解CSS Clip属性及用法
应用Clip属性实现的一个简单效果图:
样式写法:
- .my-element {
- position: absolute;
- clip: rect(10px 350px 170px 0); /* IE4 to IE7 */
- clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */
- }
属性解析:
clip
: { shape |
auto
| inherit } ;
auto 即浏览器默认解析,无clip效果,inderit 继承父层clip样式
shape 设置clip 形状,目前只支持 rect 即:矩形。 参数样例为:
- clip: rect(<top>, <right>, <bottom>, <left>);
有点不足的是 clip 属性只能使用于 位置属性设置为 absolute 或 fixed的元素
使用Clip实现的范例:
- <style>
- img {
- position: absolute;
- left: 10px;
- top: 60px;
- display: block;
- clip: rect(200px, 0, 0, 400px);
- -webkit-transition: all 0.5s ease-out;
- -moz-transition: all 0.5s ease-out;
- transition: all 0.5s ease-out;
- }
- span:hover ~ img {
- clip: rect(0, 400px, 200px, 0);
- }
- span {
- display: inline-block;
- padding: 10px;
- margin: 10px;
- background: #08C;
- color: white;
- font-family: "Helvetica", "Arial", sans-serif;
- font-weight: bold;
- text-shadow: 0 -1px rgba(0,0,0,0.3);
- text-align: center;
- cursor: pointer;
- }
- span:hover {
- background: #09C;
- }
- </style>
- <span>Hover me</span>
- <img src=http://www.mamicode.com/"http://lorempixel.com/400/200/">
2
- <style>
- body {
- overflow: hidden;
- }
- ul {
- padding: 0;
- margin: 10px;
- list-style: none;
- width: 300px;
- height: 300px;
- box-shadow: 0 0 10px rgba(0,0,0,0.5);
- }
- ul:after {
- clear: both;
- content: "";
- display: table;
- }
- li {
- position: relative;
- float: left;
- width: 100px;
- height: 100px;
- background: url(‘ http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/pw_maze_white.png‘);
- cursor: pointer;
- }
- li:nth-of-type(3n+1) {
- clear: both;
- }
- img {
- position: absolute;
- display: block;
- clip: rect(0, 100px, 100px, 0);
- -webkit-transition: all 0.2s ease-out, z-index 0s;
- -moz-transition: all 0.2s ease-out, z-index 0s;
- transition: all 0.2s ease-out, z-index 0s;
- opacity: 0.9;
- }
- li:hover img {
- clip: rect(0, 300px, 300px, 0);
- z-index: 2;
- opacity: 1;
- }
- li:nth-of-type(3n+1):hover img {
- left: 310px;
- }
- li:nth-of-type(3n+2):hover img {
- left: 210px;
- }
- li:nth-of-type(3n):hover img {
- left: 110px;
- }
- li:nth-of-type(n+4):nth-of-type(-n+6):hover img {
- top: -100px;
- }
- li:nth-of-type(n+7):nth-of-type(-n+9):hover img {
- top: -200px;
- }
- </style>
- <ul>
- <li><img src=http://www.mamicode.com/"http://lorempixel.com/300/300/sports/"></li>
- <li><img src=http://www.mamicode.com/"http://lorempixel.com/300/300/animals/"></li>
- <li><img src=http://www.mamicode.com/"http://lorempixel.com/300/300/abstract/"></li>
- <li><img src=http://www.mamicode.com/"http://lorempixel.com/300/300/nightlife/"></li>
- <li><img src=http://www.mamicode.com/"http://lorempixel.com/300/300/city/"></li>
- <li><img src=http://www.mamicode.com/"http://lorempixel.com/300/300/food/"></li>
- <li><img src=http://www.mamicode.com/"http://lorempixel.com/300/300/people/"></li>
- <li><img src=http://www.mamicode.com/"http://lorempixel.com/300/300/nature/"></li>
- <li><img src=http://www.mamicode.com/"http://lorempixel.com/300/300/fashion/"></li>
- </ul>
关于Clip属性应用的进阶使用范例: http://tympanus.net/codrops/2013/01/17/putting-css-clip-to-work-expanding-overlay-effect/
参考网址: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。