CSS3 clip裁剪动画

下面是比较简单的例子
<pre>
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 120px 151px 0px);
animation: clipMe 5s linear infinite;
}
@-webkit-keyframes clipMe {
0% {

}

100% {
clip:rect(0px 0px 151px 0px);
}
}
</style>
</head>

<body>
<p>clip 属性剪切了一幅图像：</p>
<p><img border="0" src="/i/eg_bookasp.gif" width="120" height="151"></p>
</body>

</html>
</pre>

如果clip属性不理解的看下面1张图 秒懂！！
<img src="http://newmiracle.cn/wp-content/uploads/2016/11/QQ截图20161105144011-300x167.jpg" alt="qq%e6%88%aa%e5%9b%be20161105144011" width="300" height="167" class="alignnone size-medium wp-image-390" />

CSS3 clip裁剪动画的更多相关文章

  1. JS框架_(JQuery.js)纯css3进度条动画

    百度云盘 传送门 密码:wirc 进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <me ...

  2. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  3. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  4. CSS3的自定义动画帧

    CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...

  5. CSS3中的动画功能（一）

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  6. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  7. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  8. 纯css3实现的动画加载条

    之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...

  9. 纯css3实现的动画加载特效

    之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap& ...

随机推荐

  1. IT兄弟连 HTML5教程 HTML5的基本语法 了解Web

    HTML也是计算机编程语言,但由于功能简单易用,不涉及业务逻辑,算是编程语言中最简单的了.其实学习HTML这门语言,就是在学习一个个HTML标记的使用,标记的名称和使用不是自定义的,它的功能及用法是已 ...

  2. 划词标注1——使用svg绘制换行文本并自动识别库中字典数据

    业务需求 给出一段文本,自动识别出文本中包含的关键字信息,关键字是库里已知的数据,根据类型的不同显示出不同的颜色 业务分析 1)采用css:文本识别出来后,根据识别出的文本更改对应文本的dom,通过更 ...

  3. app——升级测试点

    APP版本升级的测试点 该文章转载于:https://www.cnblogs.com/changpuyi/p/8618755.html   移动端版本更新升级是一个比较重要的功能点,主要分为强制更新和 ...

  4. 学习 正则表达式 js java c# python 通用

    正则表达式 js java c# python 学习网站 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Globa ...

  5. MySQL 中的字符串类型

    字符类型包括: CHAR VARCHAR BINARY VARBINARY BLOB TEXT ENUM SET CHAR 与 VARCHAR CHAR(m) m 取值范围 0-255.列宽固定,存储 ...

  6. ABAP 7.4 新语法-内嵌生命和内表操作（转）

    转自:https://www.cnblogs.com/mingdashu/p/6744637.html ABAP 7.4 新语法-内嵌生命和内表操作   1.内嵌声明 2.内表操作 3.opensql ...

  7. 采用邻接矩阵表示图的深度优先搜索遍历(与深度优先搜索遍历连通图的递归算法仅仅是DFS的遍历方式变了)

    //采用邻接矩阵表示图的深度优先搜索遍历(与深度优先搜索遍历连通图的递归算法仅仅是DFS的遍历方式变了) #include <iostream> using namespace std; ...

  8. C#窗体间常用的几种传值方式、以及委托与事件的详细介绍

    窗体间的传值,最好使用委托方式传值,开始之前,我们先来说一下委托与事件的关系. 委托:是一个类. 事件:是委托类型的一个特殊实例,只能在类的内部触发执行. 首先创建2个窗体,这里我们以form1为发送 ...

  9. 创建Npm脚手架

    1工具 l  Npm ( https://nodejs.org/en/ ) l  Yeoman (npm install -g yo) l  generator-generator (npm inst ...

  10. 6-SQL子查询

    (1) 什么是关联子查询,什么是非关联子查询 (嵌套查询) 子查询从数据表中查询了数据结果,如果这个数据结果只执行一次,然后这个数据结果作为主查询的条件进行执行,那么这样的子查询叫做非关联子查询. 如 ...