1. 用到知识：

CSS:animate  ,clipe

2.原理： 用clip 属性 将div  切边 ，会出现 切边的动态效果，然后内部的div 遮住外部的div  ,流出一部分 作为边；

就是旋转的效果；

代码如下：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>边缘线条转圈效果</title>

 </head>

 <style>

	#f1{width:500px;height:500px;position:absolute;background:red;}

	@keyframes clips{

		0%{

			clip:rect(0px 220px 2px 10px)

		}

		25%{

			clip:rect(0px 2px 220px 10px)

		}

		50%{

			clip:rect(218px 220px 210px 10px)

		}

		70%{

			clip:rect(0px 220px 220px 210px)

		}

		100%{

			clip:rect(0px 220px 2px 10px)

		}

	}

	#f1{animation:clips  8s linear infinite

}

 </style>

 <body>

  <div id="f1">

  </div>

 </body>

</html>

　　

线条围绕 div 中心转圈 效果的更多相关文章

  1. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  2. DIV的摇晃效果---jquery实现

    DIV的摇晃效果---jquery实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  3. js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

    1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...

  4. jQuery实现的Div窗口震动效果实例

    本文实例讲述了jQuery实现的Div窗口震动效果.分享给大家供大家参考.具体如下: 这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8.360.Fi ...

  5. CSS3 实现六边形Div图片展示效果

    原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...

  6. HTML 通过js实现div的拖动效果

    最近做项目,碰到一个问题,需要对div实现拖动效果. 在度娘找了很多,要么觉得代码太长,要么就是效果不理想,不过最后还是找到了一个不错的,感谢大神的留贴,方便了我们,就把代码贴下面了: <!DO ...

  7. JaveWeb 公司项目（1）----- 使Div覆盖另一个Div完成切换效果

    最近在做网页,用的是CSS+DIV的布局方法,搭建了一个简易的界面,大体上分为三个部分,如图所示: 左侧的为主功能导航栏,右侧是具体的功能实现,下方是固定的版权声明,单击左边不同的导航按钮,在div中 ...

  8. iOS 实现加载转圈效果

    1.思路: 新建一个view,添加shape,给予一个动画实现. 2.效果图: 效果1: 效果2: gif有点卡,代码运行不会这样. 3.源码(整个类放进来的) 效果1源码: // // YJDown ...

  9. 为div添加滚动效果:

    为div添加滚动效果: .xxxx{ width: 100%; height: 100%; overflow: hidden; overflow-y: auto;} 代码片段 <div clas ...

随机推荐

  1. Python 文件遍历

    Python具备强大的解析能力,其中列表解析甚至可以作用在某些并非实际存储的序列上,任何可遍历对象都可以,包括可自动逐步读取的文件. 例如下面的代码将会从逐行读取一个文本文件,并且在每一行的最后加上一 ...

  2. SQLite初试...

    string dataPath = "../../UserData.dbx"; //System.IO.Directory.GetCurrentDirectory() + &quo ...

  3. JavaWeb学习总结(五十)——文件上传和下载

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...

  4. JSON/XML序列化与反序列化（非构造自定义类）

    隔了很长时间再重看自己的代码,觉得好陌生..以后要养成多注释的好习惯..直接贴代码..对不起( ▼-▼ ) 保存保存:进行序列化后存入应用设置里 ApplicationDataContainer _a ...

  5. Mac安装OpenCV

    安装过程参考这篇文章Mac平台上OpenCV开发环境搭建 也可以参考文档官网上的安装文档Installation in Linux(不知道为什么没有Installation in Mac...) 我的 ...

  6. php 通过curl post发送json数据实例

    例1  代码如下 复制代码 $data = array("name" => "Hagrid", "age" => "3 ...

  7. JAVA操作ORACLE数据库的存储过程

    一.任务提出 JAVA操作oracle11g存储过程实验需要完成以下几个实例: 1.调用没有返回参数的过程(插入记录.更新记录) 2.有返回参数的过程 3.返回列表的过程 4.返回带分页的列表的过程. ...

  8. Maven生命周期和插件机制

    Maven中的一个非常重要的概念是生命周期和插件,这篇文章重点介绍下Maven的生命周期. Maven的生命周期是抽象的,具体的功能是有具体的插件来完成的,Maven有相当多的功能插件,以至于Mave ...

  9. 十进制转为N进制

    昨天笔试遇到的题,如果是正数,不断以余数做除法即可: void convert(int num, int N, vector<char>& data) { int number = ...

  10. 6 HandlerDescriptor 处理程序描述类——Live555源码阅读(一)基本组件类

    这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. 本文由乌合之众 lym瞎编,欢迎转载 http://www.cnblogs.com/oloroso ...