应用Clip属性实现的一个简单效果图:

样式写法:

  1. .my-element {
  2. position: absolute;
  3. clip: rect(10px  350px  170px  0); /* IE4 to IE7 */
  4. clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */
  5. }

属性解析:

clip: { shape | auto | inherit } ;
auto 即浏览器默认解析,无clip效果,inderit 继承父层clip样式
shape 设置clip 形状,目前只支持 rect 即:矩形。 参数样例为:
  1. clip: rect(<top>, <right>, <bottom>, <left>);

有点不足的是 clip 属性只能使用于 位置属性设置为 absolute 或 fixed的元素

使用Clip实现的范例:

  1. <style>
  2. img {
  3. position: absolute;
  4. left: 10px;
  5. top: 60px;
  6. display: block;
  7. clip: rect(200px, 0, 0, 400px);
  8. -webkit-transition: all 0.5s ease-out;
  9. -moz-transition: all 0.5s ease-out;
  10. transition: all 0.5s ease-out;
  11. }
  12. span:hover ~ img {
  13. clip: rect(0, 400px, 200px, 0);
  14. }
  15. span {
  16. display: inline-block;
  17. padding: 10px;
  18. margin: 10px;
  19. background: #08C;
  20. color: white;
  21. font-family: "Helvetica", "Arial", sans-serif;
  22. font-weight: bold;
  23. text-shadow: 0 -1px rgba(0,0,0,0.3);
  24. text-align: center;
  25. cursor: pointer;
  26. }
  27. span:hover {
  28. background: #09C;
  29. }
  30. </style>
  31. <span>Hover me</span>
  32. <img src="http://lorempixel.com/400/200/">

2

  1. <style>
  2. body {
  3. overflow: hidden;
  4. }
  5. ul {
  6. padding: 0;
  7. margin: 10px;
  8. list-style: none;
  9. width: 300px;
  10. height: 300px;
  11. box-shadow: 0 0 10px rgba(0,0,0,0.5);
  12. }
  13. ul:after {
  14. clear: both;
  15. content: "";
  16. display: table;
  17. }
  18. li {
  19. position: relative;
  20. float: left;
  21. width: 100px;
  22. height: 100px;
  23. background: url(' http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/pw_maze_white.png');
  24. cursor: pointer;
  25. }
  26. li:nth-of-type(3n+1) {
  27. clear: both;
  28. }
  29. img {
  30. position: absolute;
  31. display: block;
  32. clip: rect(0, 100px, 100px, 0);
  33. -webkit-transition: all 0.2s ease-out, z-index 0s;
  34. -moz-transition: all 0.2s ease-out, z-index 0s;
  35. transition: all 0.2s ease-out, z-index 0s;
  36. opacity: 0.9;
  37. }
  38. li:hover img {
  39. clip: rect(0, 300px, 300px, 0);
  40. z-index: 2;
  41. opacity: 1;
  42. }
  43. li:nth-of-type(3n+1):hover img {
  44. left: 310px;
  45. }
  46. li:nth-of-type(3n+2):hover img {
  47. left: 210px;
  48. }
  49. li:nth-of-type(3n):hover img {
  50. left: 110px;
  51. }
  52. li:nth-of-type(n+4):nth-of-type(-n+6):hover img {
  53. top: -100px;
  54. }
  55. li:nth-of-type(n+7):nth-of-type(-n+9):hover img {
  56. top: -200px;
  57. }
  58. </style>
  59. <ul>
  60. <li><img src="http://lorempixel.com/300/300/sports/"></li>
  61. <li><img src="http://lorempixel.com/300/300/animals/"></li>
  62. <li><img src="http://lorempixel.com/300/300/abstract/"></li>
  63. <li><img src="http://lorempixel.com/300/300/nightlife/"></li>
  64. <li><img src="http://lorempixel.com/300/300/city/"></li>
  65. <li><img src="http://lorempixel.com/300/300/food/"></li>
  66. <li><img src="http://lorempixel.com/300/300/people/"></li>
  67. <li><img src="http://lorempixel.com/300/300/nature/"></li>
  68. <li><img src="http://lorempixel.com/300/300/fashion/"></li>
  69. </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/

理解CSS Clip属性及用法的更多相关文章

  1. CSS Clip属性

    Clip属性在W3C官网是这样进行描述的:“通过对元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了clip属性”. .selector { c ...

  2. 将CSS CLIP属性应用在:扩展覆盖效果

    我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡.这个想法是为了实现某种叠加效果,好像它实际上在各个元素的下面.点击其中一个元素将创建一个切断 ...

  3. CSS margin属性与用法教程

    margin 属性是css用于在一个声明中设置所有 margin 属性的简写属性,margin是css控制块级元素之间的距离, 它们之间是透明不可见的. margin属性包含了margin left  ...

  4. JS控制css float属性的用法经验总结

    JavaScript与CSS属性的控制网上很常见,因此来说用js操作css属性是有一定规律的. 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin ...

  5. CSS Clip剪切元素动画实例

    1.CSS .fixed { position: fixed; width: 90px; height: 90px; background: red; border: 0px solid blue; ...

  6. WPF 用Clip属性实现蒙板特效

    原文:WPF 用Clip属性实现蒙板特效 上一篇,已简单介绍Clip属性的用法,这一篇用它来实现简单蒙板功能,很简单,直接上代码 <Window x:Class="擦除效果.MainW ...

  7. 关于CSS的table-layout属性的用法详解

    前言: 今天来和大家详细说一下table-layout属性的用法. /*eg:设置表格布局算法*/ table{ table-layout:fixed; } ***本文关键词:table-layout ...

  8. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  9. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

随机推荐

  1. Snake - SGU 128(构造多边形)

    题目大意:有N个点,如果可以使用这N个点连接,连接的时候任意两条边要成直角,任意边都要平行于x轴或者y轴,并且不能出现跨立相交,最终组成一个闭合的多边形,求出来这个多边形的最小长度. 分析:容易证明这 ...

  2. hdoj 3342 Legal or Not【拓扑排序】

    Legal or Not Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  3. C/C++基础(二)

    (1)运算符优先级 #include <cstdio> using namespace std; int main() {    unsigned char a = 0xA5;    un ...

  4. 用网页server实现钢琴弹奏(使用Wizwiki-W7500)

      我将为大家介绍一个能够弹钢琴的网页server. 你仅仅须要打开网页,跟着以下步骤,用这个WIZwiki-W7500项目,就能轻松实现用网页server弹钢琴. 很easy. 我们開始吧! 第 ...

  5. Python基础 1----Python语言基础和Python环境准备与安装

    引导语: 人们学习Python是因为他们爱这门语言,因为他们追寻美,如果我雇用一个Python程序员,那么他们的技术将非常的棒 1 Python是一门跨平台的语言,是一种面向对象的动态编程语言 发布时 ...

  6. nodejs 按行读取 readline

                fs.mkdirSync('./yotmp');      }                  log(out);               input: file,    ...

  7. 你的网站为什么会慢?——用YSlow为你的网站提速

    在前面的文章我翻译的文章中分别从内容.服务器.JavaScript和CSS.图片.Coockies和移动应用等几个方面总结了34条提高网站性能的黄金守则,但是这些守则中,有一些是不常用到的,若非有实力 ...

  8. POJ - 3608 Bridge Across Islands【旋转卡壳】及一些有趣现象

    给两个凸包,求这两个凸包间最短距离 旋转卡壳的基础题 因为是初学旋转卡壳,所以找了别人的代码进行观摩..然而发现很有意思的现象 比如说这个代码(只截取了关键部分) double solve(Point ...

  9. iOS图片压缩

    项目中常会遇到,上传图片的操作,由于iPhone手机直接拍照的图片往往比较大,一般3-4M,如果直接上传不做处理会浪费用户很多流量,再者有很多场景并不需要高清图片,所以在上传图片前对图片进行压缩,是很 ...

  10. Python之路【第十二篇】:JavaScrpt -暂无内容-待更新

    Python之路[第十二篇]:JavaScrpt -暂无内容-待更新