CSS Clip剪切元素实例
一、实例1:
.fixed {
position: fixed;
width: 382px;
height: 100px;
background: red;
border: 1px solid blue;
left:100px;
top:100px;
} .fixed img {
position: absolute;
animation: face 4s ease infinite alternate;
-webkit-animation: face 4s ease infinite alternate;
clip: rect(0px,129px,100px,0px); }
@keyframes face {
from {
clip: rect(0px,129px,100px,0px);
}
to{
clip: rect(0px,382px,100px,258px);
}
}
二、实例2:
.fixed {
position: fixed;
width: 382px;
height: 100px;
background: red;
border: 1px solid blue;
left:100px;
top:100px;
} .fixed img {
position: absolute;
} .face1 {
clip: rect(0px,129px,100px,0px);
} .face2 {
clip: rect(0px,258px,100px,129px);
} .face3 {
clip: rect(0px,382px,100px,258px);
}
<div class="fixed">
<img class="face3" src="../Img/clip-rect-10.png" />
</div>
<script>
var number = 0;
var img = document.getElementsByTagName('img')[0];
setInterval(function () {
number++;
if (number == 4)
number = 1;
img.className = 'face' + number;
}, 1000);
</script>
三、实例3:
.fixed {
position: fixed;
width: 100px;
height: 100px;
background: red;
border: 0px solid blue;
left: 100px;
top: 100px;
animation:animateOne linear 4s infinite;
}
@keyframes animateOne {
0%,100% {
clip: rect(0px,100px,5px,0px);
} 25% {
clip: rect(0px,5px,100px,0px);
} 50% {
clip: rect(95px,100px,100px,0px);
} 75% {
clip: rect(0px,100px,100px,95px);
}
}
四、实例4:
.fixed {
position: fixed;
width: 90px;
height: 90px;
background: red;
border: 0px solid blue;
left: 100px;
top: 100px;
}
.fixed:before {
position: absolute;
width: 100px;
height: 100px;
margin:-5px;
box-shadow:inset 0px 0px 2px 2px blue;
content:'';
animation: animateOne linear 4s infinite;
}
@keyframes animateOne {
0%,100% {
clip: rect(0px,100px,5px,0px);
} 25% {
clip: rect(0px,5px,100px,0px);
} 50% {
clip: rect(95px,100px,100px,0px);
} 75% {
clip: rect(0px,100px,100px,95px);
}
}
Clip属性简介:http://www.cnblogs.com/tianma3798/p/5862126.html
CSS Clip剪切元素实例的更多相关文章
- CSS Clip剪切元素动画实例
1.CSS .fixed { position: fixed; width: 90px; height: 90px; background: red; border: 0px solid blue; ...
- CSS clip:rect矩形剪裁功能及一些应用介绍
CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...
- 用 CSS 隐藏页面元素
用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...
- 用 CSS 隐藏页面元素的 5 种方法
原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...
- CSS 伪类 (Pseudo-classes)实例
CSS 伪类 (Pseudo-classes)实例CSS 伪类用于向某些选择器添加特殊的效果在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访 ...
- CSS 隐藏页面元素的 几 种方法总结
用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolu ...
- CSS 内边距 (padding) 实例
CSS 内边距 (padding) 实例元素的内边距在边框和内容区之间.控制该区域最简单的属性是 padding 属性. CSS padding 属性定义元素边框与元素内容之间的空白区域.CSS 内边 ...
- CSS学习摘要-定位实例
CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...
- 浅谈css的伪元素::after和::before
css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...
随机推荐
- dispatch队列
GCD编程的核心就是dispatch队列,dispatch block的执行最终都会放进某个队列中去进行,它类似NSOperationQueue但更复杂也更强大,并且可以嵌套使用.所以说,结合bloc ...
- Codeforces Round #154 (Div. 2) : B
一个很简单的题: 方法一: 二分. 代码: #include<cstdio> #include<algorithm> #define maxn 100005 using nam ...
- 当今流行的 React.js 适用于怎样的 Web App?
外村 和仁(株式会社 ピクセルグリッド) React.js是什么? React.js是Facebook开发的框架. http://facebook.github.io/react/ 官网上的描述是「 ...
- 减少 WAF 漏报的 8 种方法 !
近十年来,WAF 已经逐渐发展成熟,被软件行业接受并成为无数企业保护应用的不二选择.很多大型企业甚至相继亲自设计或通过并购涉足其中,在这个硕大的市场里逐鹿竞争,同时也推动了应用层防火墙的技术演进. 与 ...
- Fail2ban用来作DDOS防守工具,不知够不够份量
http://www.serversyntax.com/2012/12/how-to-secure-centos-server-ssh-fail2ban-ddos-deflate.html http: ...
- Android WebView JavaScript交互
今天介绍一下,Android中Webview与JavaScript的交互,首先是在布局文件里添加webview控件: <WebView android:id="@+id/webview ...
- bzoj3437
练一下斜率优化 ..] of int64; q,a,b:..] of longint; i,n,h,t,j:longint; function g(j,k:longint):double; var a ...
- 不使用OCI8接口如何连接PHP和Oracle
随着网站规模的扩大,MySql显然不能满足需求,在许多网站都 采用大型数据库Oracle的情况下,如何使用PHP来访问Oracle变的越发重要了. 我从我编写的一个简单iERP系统谈我自己是如何做 ...
- hdoj 2717 Catch That Cow【bfs】
Catch That Cow Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- 查询grep结果的前后n行
linux系统中,利用grep打印匹配的上下几行 如果在只是想匹配模式的上下几行,grep可以实现. $grep -5 'parttern' inputfile //打印匹配行的前后5行 ...