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. Memcached 简介、安装和基本使用

    本章包括内容: 一.Memcached是什么.能干什么.特点; 二.在Centos7上安装Memcached 三.Memcached启动.简单操作.关闭------------------------ ...

  2. Apache CXF初级介绍（一）

    Web Service做项目必不可少 一.CXF安装 二.用Ant来创建项目 三.用Maven来创建项目 四.用Eclipse来创建项目 五

  3. R语言 小程序

    x<-sample(1:11) x 日期和时间 ###Data and Time### > data_time <- data.frame(data = c("2015-0 ...

  4. hdu.1104.Remainder(mod && ‘%’ 的区别 && 数论（k*m)）

    Remainder Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...

  5. hdu.1226.超级密码(bfs)

    超级密码 Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  6. PHP通过访问第三方接口，根据IP地址获取所在城市

    <?php header('Content-Type:text/html;Charset=utf-8'); /** * 获取IP地址 * * @return string */ function ...

  7. springmvc之log4j

    1.工程结构 2.所需jar包 3.web.xml <?xml version="1.0" encoding="UTF-8"?> <web-a ...

  8. PHP Socket实现websocket（一）基本函数介绍

    WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duplex). 一开始的握手需要借助HTTP请求完成. WebSocket是基于TCP来实 ...

  9. Lvs原理及部署之ARP协议

    1.什么使ARP协议 ARP协议,全称"Address Resolution Protocol" ,中文名是地址解析协议,使用ARP协议可实现通过IP地址获得对应的物理地址(MAC ...

  10. BZOJ1212——L语言

    题目大意:每一个字符串都可以分解成一些个单词组成,现在给你一些单词,再给你一个字符串, dp吧,设f[i]为从0开始,到i结束的字符串前缀是否可以被分解,因为单词长度很小,所以,这就T了, (什么逻辑 ...