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. 【活动】不用买书，不用花钱，可以免费看HTML5入门连载了

    清华大学出版社推出的<HTML 5网页开发实例详解>适合HTML 5开发初学者和前端开发工程师.本书一经上市,就获得了读者的一致好评,为感谢读者,推出本书的连载活动.   本书术新颖.与时 ...

  2. 【开源一个小工具】一键将网页内容推送到Kindle

    最近工作上稍微闲点,这一周利用下班时间写了一个小工具,其实功能挺简单但也小折腾了会. 工具名称:Simple Send to Kindle Github地址:https://github.com/zh ...

  3. ZOJ 3711 Give Me Your Hand

    Give Me Your Hand Time Limit: 2 Seconds      Memory Limit: 131072 KB      Special Judge BellyWhite a ...

  4. CF #305(Div.2) D. Mike and Feet(数学推导）

    D. Mike and Feet time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  5. composer环境配置

    一 下载composer.phar http://pan.baidu.com/s/1nuDQBzz cmd命令行切换到composer.phar文件目录下 运行: echo @php "%~ ...

  6. 如何建立一个完整的游戏AI

    http://blog.friskit.me/2012/04/how-to-build-a-perfect-game-ai/ 人工智能(Artificial Intelligence)在游戏中使用已经 ...

  7. 2016年11月6日--form表单验证和事件、正则表达式

    1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...

  8. Jsoup Element网页信息采集

    package zeze; import java.io.IOException; import org.jsoup.Jsoup; import org.jsoup.nodes.Document; i ...

  9. javascript最容易混淆的作用域、提升、闭包

    一.函数作用域 1.函数作用域 就是作用域在一个“Function”里,属于这个函数的全部变量都可以在整个函数的范围内使用及复用. function foo(a) { var b = 2; funct ...

  10. linux系统下获取IP，MAC，子网掩码，网关

    获取IP和子网掩码 int getLocalInfo(char IP[],char Mask[]) { int fd; int interfaceNum = 0; struct ifreq buf[1 ...