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. Seven Kinds of Testers － 七种类型的测试

    最近读了James大叔的一篇总结Tester类型的文章,获益良多.原文叫做Seven Kinds of Testers(链接:http://www.satisfice.com/blog/archive ...

  2. Java学习笔记 DbUtils数据库查询和log4j日志输出 使用

    DbUtils使用 QueryRunner DbUtils中定义了一个数据库操作类QueryRunner,所有的数据库操作CRUD都是通过此类来完成. 此类是线程安全的 方法名 对应sql语句 exc ...

  3. 最全的.NET Core跨平台微服务学习资源

    一.Asp.net Core基础 微软中文官网:https://docs.microsoft.com/zh-cn/aspnet/core/getting-started/ 微软英文官网:https:/ ...

  4. C#用Call代替CallVirt之后的测试用例

    一. C# 原始代码和直接结果 测试 C# 代码: class Program { static void Main(string[] args) { A c1 = new C(); c1.Foo() ...

  5. 虚拟机Centos6.7安装VMTools

    安装VMware Tools,设置共享文件夹 一.基本步骤 1.VMware Workstation菜单栏中,选择“虚拟机”,”安装VMware Tools...“.(注:此时下方可能会弹出“确保您已 ...

  6. 关于Spring Boot你不得不知道的事

    1 Spring Boot官网[2.1.5 CURRENT GA] 1.1 Pivotal Wiki Pivotal Software, Inc. is a software and services ...

  7. SQL 注入漏洞浅研究学习

    SQL注入漏洞:Web安全方面最高危的漏洞,SQL漏洞威胁着网站后台数据的安全问题. 网上常说“万能密码”,这个万能密码则就是利用了SQL注入漏洞: ' or 1=1 -- 上述的万能密码输入在用户登 ...

  8. [b0038] python 归纳 (二三)_多进程数据共享和同步_队列Queue

    1  队列读写 # -*- coding: utf-8 -*- """ 多进程 共享 队列 multiprocessing.Process 逻辑: 一个进程往队列写数据, ...

  9. MongoDB 读偏好设置中增加最大有效延迟时间的参数

    在某些情况下,将读请求发送给副本集的备份节点是合理的,例如,单个服务器无法处理应用的读压力,就可以把查询请求路由到可复制集中的多台服务器上.现在绝大部分MongoDB驱动支持读偏好设置(read pr ...

  10. [Go] gocron源码阅读-通过第三方cli包实现命令行参数获取和管理

    gocron源码中使用的是下面这个第三方包来实现的,下面就单独的拿出来测试以下效果,和官方flag包差不多 go get github.com/urfave/cli package main impo ...