理解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 } ;
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://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://lorempixel.com/300/300/sports/"></li>
- <li><img src="http://lorempixel.com/300/300/animals/"></li>
- <li><img src="http://lorempixel.com/300/300/abstract/"></li>
- <li><img src="http://lorempixel.com/300/300/nightlife/"></li>
- <li><img src="http://lorempixel.com/300/300/city/"></li>
- <li><img src="http://lorempixel.com/300/300/food/"></li>
- <li><img src="http://lorempixel.com/300/300/people/"></li>
- <li><img src="http://lorempixel.com/300/300/nature/"></li>
- <li><img src="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/
理解CSS Clip属性及用法的更多相关文章
- CSS Clip属性
Clip属性在W3C官网是这样进行描述的:“通过对元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了clip属性”. .selector { c ...
- 将CSS CLIP属性应用在:扩展覆盖效果
我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡.这个想法是为了实现某种叠加效果,好像它实际上在各个元素的下面.点击其中一个元素将创建一个切断 ...
- CSS margin属性与用法教程
margin 属性是css用于在一个声明中设置所有 margin 属性的简写属性,margin是css控制块级元素之间的距离, 它们之间是透明不可见的. margin属性包含了margin left ...
- JS控制css float属性的用法经验总结
JavaScript与CSS属性的控制网上很常见,因此来说用js操作css属性是有一定规律的. 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin ...
- CSS Clip剪切元素动画实例
1.CSS .fixed { position: fixed; width: 90px; height: 90px; background: red; border: 0px solid blue; ...
- WPF 用Clip属性实现蒙板特效
原文:WPF 用Clip属性实现蒙板特效 上一篇,已简单介绍Clip属性的用法,这一篇用它来实现简单蒙板功能,很简单,直接上代码 <Window x:Class="擦除效果.MainW ...
- 关于CSS的table-layout属性的用法详解
前言: 今天来和大家详细说一下table-layout属性的用法. /*eg:设置表格布局算法*/ table{ table-layout:fixed; } ***本文关键词:table-layout ...
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
随机推荐
- Snake - SGU 128(构造多边形)
题目大意:有N个点,如果可以使用这N个点连接,连接的时候任意两条边要成直角,任意边都要平行于x轴或者y轴,并且不能出现跨立相交,最终组成一个闭合的多边形,求出来这个多边形的最小长度. 分析:容易证明这 ...
- hdoj 3342 Legal or Not【拓扑排序】
Legal or Not Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tota ...
- C/C++基础(二)
(1)运算符优先级 #include <cstdio> using namespace std; int main() { unsigned char a = 0xA5; un ...
- 用网页server实现钢琴弹奏(使用Wizwiki-W7500)
我将为大家介绍一个能够弹钢琴的网页server. 你仅仅须要打开网页,跟着以下步骤,用这个WIZwiki-W7500项目,就能轻松实现用网页server弹钢琴. 很easy. 我们開始吧! 第 ...
- Python基础 1----Python语言基础和Python环境准备与安装
引导语: 人们学习Python是因为他们爱这门语言,因为他们追寻美,如果我雇用一个Python程序员,那么他们的技术将非常的棒 1 Python是一门跨平台的语言,是一种面向对象的动态编程语言 发布时 ...
- nodejs 按行读取 readline
fs.mkdirSync('./yotmp'); } log(out); input: file, ...
- 你的网站为什么会慢?——用YSlow为你的网站提速
在前面的文章我翻译的文章中分别从内容.服务器.JavaScript和CSS.图片.Coockies和移动应用等几个方面总结了34条提高网站性能的黄金守则,但是这些守则中,有一些是不常用到的,若非有实力 ...
- POJ - 3608 Bridge Across Islands【旋转卡壳】及一些有趣现象
给两个凸包,求这两个凸包间最短距离 旋转卡壳的基础题 因为是初学旋转卡壳,所以找了别人的代码进行观摩..然而发现很有意思的现象 比如说这个代码(只截取了关键部分) double solve(Point ...
- iOS图片压缩
项目中常会遇到,上传图片的操作,由于iPhone手机直接拍照的图片往往比较大,一般3-4M,如果直接上传不做处理会浪费用户很多流量,再者有很多场景并不需要高清图片,所以在上传图片前对图片进行压缩,是很 ...
- Python之路【第十二篇】:JavaScrpt -暂无内容-待更新
Python之路[第十二篇]:JavaScrpt -暂无内容-待更新