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. SQL中关于日期的常用方法

    mysql数据库: logintime >= STR_TO_DATE('$$START_TIME','%Y-%m-%d %H:%i:%s') AND logintime < STR_TO_ ...

  2. springmvc之定时器

    一.通过注解方式实现定时器 1.工程结构 2.所需jar包 3.spring-config.xml,springmvc配置文件 <?xml version="1.0" enc ...

  3. IOS学习目录

    一.UI 1.基础控件 2.高级控件 二.多线程网络 1.网络请求.网络安全 2.

  4. 9 patch png 的上下左右

    9 patch png 的上下左右   前言: 9 patch png 图片,扩展名为.9.png,是一个标准的PNG图像,它包括额外的1个像素的边界,通过对这个边界的描述来达到我们预期的拉伸效果.a ...

  5. java项目导入IntelliJ IDEA

    (0)之所以有第0步,是因为第一次倒入失败,所以从删除上次倒入的数据开始- 开始删除数据. 启动Intelli J,点击右键删除上次的导入的项目 把配置拷贝到.m2文件夹下,并且删除上次下载的一些依赖 ...

  6. [lintcode] Binary Tree Maximum Path Sum II

    Given a binary tree, find the maximum path sum from root. The path may end at any node in the tree a ...

  7. ios中二维码的使用之二： 二维码的扫描

    二维码的扫描: 1,导入支持框架,<AVFoundation/AVFoundation.h> 2 ,扫描:

  8. C++基础知识（1）----文件操作

    参照 小菜鸟上校 的博客 // file operat.cpp : 定义控制台应用程序的入口点. /*上述例子的主要功能是将一个文件的内容复制到另一个文件中, 这个功能主要由一个函数copy来实现.它 ...

  9. PyCharm 入手第一记

    因为我是忠实的Linux用户,所以一下操作是在Linux下的完成,除了下载,因为Linux的下载着实有点让人捉急. PyCharm 下载地址: http://www.jetbrains.com/pyc ...

  10. linux kernel 字符设备详解

    有关Linux kernel 字符设备分析: 参考:http://blog.jobbole.com/86531/ 一．linux kernel 将设备分为3大类,字符设备,块设备,网络设备． 字符设备 ...