<html>
    <head>
        <title>css3动画border旋转时的应用。</title>
        <meta charset="UTF-8"/>
        <style type="text/css">
        body{
            background: #ccc;
        }
            .he{
                width: 100px;
                height: 100px;
                margin: 200px auto;
                border: 10px solid black;
                border-left-color: #fff;
                border-radius: 70px;
                animation: namemf 1s linear infinite;
                -webkit-animation:namemf 1s linear infinite;
                -ms-animation: namemf 1s linear infinite;
            }
            @keyframes namemf{
                from{
                    transform:rotate(0deg) ;
                }
                to{
                    transform: rotate(360deg);
                }
            }
            @-webkit-keyframes namemf{
                from{
                    transform:rotate(0deg) ;
                }
                to{
                    transform: rotate(360deg);
                }
            }
            @-ms-keyframes namemf{
                from{
                    transform:rotate(0deg) ;
                }
                to{
                    transform: rotate(360deg);
                }
            }

        </style>
    </head>
    <body>
        <div class="he">

        </div>
    </body>
</html>

效果图

上面代码中要注意的地方：

border-radius: 70px;为70px时div才能显示为圆形，因为上下左右的border多出了20px
 border-left-color: #fff;可以独立设置一边的颜色
 animation: namemf 1s linear infinite;中linear为匀速运动　　　　　　　ease：动画以低速开始，然后加快，在结束前变慢。　　　　　　　ease-in：动画以低速开始　　　　　　　ease-out：动画以低速结束
												


											
css3动画使用技巧之—border旋转时的应用。的更多相关文章
	

    
								
  1. css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用
		
    <!DOCTYPE html> <html> <head> <title>css3动画使用技巧之—JQ配合css3实现轮播之animation-dela ...
    
		
    2. 
						
  2. css3动画使用技巧之——transform-delay为负值时的应用。
		
    <html>    <head>        <title>css3动画delay为负值时的效果</title>        <meta ch ...
    
		
    3. 
						
  3. CSS3动画制作
		
    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
    
		
    4. 
						
  4. css3动画应用-音乐唱片旋转播放特效
		
    css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
    
		
    5. 
						
  5. 使用CSS3动画属性实现各种旋转跳跃
		
    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. tran ...
    
		
    6. 
						
  6. !!学习笔记：CSS3动画
		
    一句话就有css3动画: 2016-6-29 <style type="text/css"> h1{background:#999;} h1:hover{border- ...
    
		
    7. 
						
  7. 用CSS3动画特效实现弹窗效果
		
    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
    
		
    8. 
						
  8. 经验分享：多屏复杂动画CSS技巧三则
		
    当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画.并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出.例如上个月做的「企业QQ-新年祝福」活动: 感谢sh ...
    
		
    9. 
						
  9. 如何使用js捕获css3动画
		
    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. mysql繁字体报错,Incorrect string value: '\xE9_' for column 'UserName' at row 1
			
    mysql 插入繁体字的时候报错,然后网上找了,说是mysql的库设置为character-set = utf8mb4 结果设置还是没效果 搞了好几天都不知道什么原因,然后今天想了想,好像之前有个学长 ...
    
			
    2. 
						
  2. 10个可以直接拿来用的JQuery代码片段
			
    jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画.特效,还会提高网站的用户体验. 本文收集了10段非常实用的jQue ...
    
			
    3. 
						
  3. html传參中？和&amp;
			
    <a href="MealServlet?type=findbyid&mid=<%=m1.getMealId()%> 在这句传參中?之后的代表要传递的參数当中有两个 ...
    
			
    4. 
						
  4. 获取WINDOWS特殊文件夹
			
    const// registry entries for special paths are kept in :  REGSTR_PATH_SPECIAL_FOLDERS   = REGSTR_PAT ...
    
			
    5. 
						
  5. AIDL-Android接口描述语言实现跨进程通讯
			
    在Android中, 每个应用程序都可以有自己的进程. 在写UI应用的时候, 经常要用到Service. 在不同的进程中, 怎样传递对象呢? 显然, Java中不允许跨进程内存共享. 因此传递对象,  ...
    
			
    6. 
						
  6. 【转】C/C++求模求余运算符——2013-08-20
			
    http://blog.csdn.net/whealker/article/details/6203629 求模运算符(%),或称求余运算符,也就是数学上所谓的除法中的余数,%两侧均应为整数, |小| ...
    
			
    7. 
						
  7. input 的 placeholder属性在IE8下的兼容处理
			
    placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...
    
			
    8. 
						
  8. c#实现几种排序方法
			
    插入排序 1.简介 插入排序(Insertion Sort)的算法描述是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入.插入排序 ...
    
			
    9. 
						
  9. C#汉字转拼音首字母
			
    输入汉字,提取其首字母: /// <summary> /// 汉字转拼音缩写 /// Code By /// 2004-11-30 /// </summary> /// < ...
    
			
    10. 
						
  10. day-1
			
    /* 倒计时就要结束了 在机房的最后一个晚上 恩 就要结束了 上午考试 下午背板 找了几个原题敲了敲 晚上zjk老妈送的饭 撑死死死死了 好吃23333 吃饭完和zjk在机房门口楼梯上聊了一会 恩 以 ...
    
			
    11.