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. JS URL传递中文参数时出现乱码的处理

    在浏览器中显示的地址是这样的: 但是按F12调试的时候的地址却变化掉了: 这个肯定是是因为浏览器对url路径默认编码了.这个问题是在我们去取值的时候,得到的就是后面那一大串稀奇古怪的东西.得不到我们想 ...

  2. NOIP2005 等价表达式

    题目描述 明明进了中学之后,学到了代数表达式.有一天,他碰到一个很麻烦的选择题.这个题目的题干中首先给出了一个代数表达式,然后列出了若干选项,每个选项也是一个代数表达式,题目的要求是判断选项中哪些代数 ...

  3. 用Javascript获取页面元素的位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

  4. hadoop之根据Rowkey从HBase中查询数据

    1.Hbase 根据rowkey 查询 conf的配置信息如下: conf = new Configuration(); conf.set("hbase.zookeeper.quorum&q ...

  5. 决策树-预测隐形眼镜类型 （ID3算法，C4.5算法，CART算法，GINI指数,剪枝，随机森林）

    1. 1.问题的引入 2.一个实例 3.基本概念 4.ID3 5.C4.5 6.CART 7.随机森林 2. 我们应该设计什么的算法,使得计算机对贷款申请人员的申请信息自动进行分类,以决定能否贷款? ...

  6. 【PHP面向对象(OOP)编程入门教程】11.类的继承

    继承作为面向对象的三个重要特性的一个方面,在面向对象的领域有着及其重要的作用,好像没听说哪个面向对象的语言不支持继承. 继承是PHP5面象对象程序设计的重要特性之一,它是指建立一个新的派生类,从一个或 ...

  7. DAY1 linux 50条命令

    1. tar压缩,解压缩 tar -cvf *** (压缩) tar -xvf ***  (解压缩) [root@bogon ~]# tar cvf test.tar test/ test/ test ...

  8. BZOJ4034——[HAOI2015]T2

    1.题目大意:用一个数据结构支持树的点修改和子树修改.树上路径和 2.分析:树链剖分裸题 #include <cstdio> #include <cstdlib> #inclu ...

  9. 百度网盘爬虫Python

    ": for i in range((shares["total_count"]-1)/ONESHAREPAGE): try: dbcurr.execute('INSER ...

  10. access数据库用sql语句添加字段，修改字段，删除字段

    用 Create Table 建立一个表 Table1 ,主键是自动编号字段,另一个字段是长度是 10 的文本字段. 代码如下:CREATE TABLE Table1 (Id COUNTER CONS ...