<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. css Spirtes 错位问题解决
			
    本文为转载内容,原文链接: https://github.com/banricho/webLog/issues/1
    
			
    2. 
						
  2. Robot Framework自动化测试（三）--- 封装系统关键字
			
    之前对robotframework-ride了解的不多,后来知道了引入Selenium2Lirary库后可以做web UI自动化测试,但发现和python没啥关系,今天学习了封装系统关键字算是和pyt ...
    
			
    3. 
						
  3. SVN eclipse插件错误
			
    部分文章转载自:http://www.bkjia.com/ASPjc/1015687.html 出现如下问题该怎么做: 1.在Windows--Preferences--Team--SVN--接口换成 ...
    
			
    4. 
						
  4. JBPM学习(二)：ProcessEngine与Service API
			
    1.获取processEngine的方法: a) 方法一 private ProcessEngine processEngine = new Configuration().setResource(& ...
    
			
    5. 
						
  5. cocos2dx 3.1创建工 mac
			
    1.下载cocos2dx 3.1版本号 2.打开终端,cd 进入 cocos2d-x-3.1.1/tools/cocos2d-console/bin 3.cocos new game -p com.t ...
    
			
    6. 
						
  6. java并发 使用ScheduledExecutor的温室控制器--thinking in java 21.7.5
			
    package org.rui.thread.newc; import java.text.DateFormat; import java.text.SimpleDateFormat; import  ...
    
			
    7. 
						
  7. wechat server的配置
			
    一 服务器地址 https://github.com/donal-tong/wechat4server 包括源代码及数据库脚本放在dump文件夹里 1.根据sql脚本创建需要的数据库hcapi,然后命 ...
    
			
    8. 
						
  8. [Javascript] Get Started with LeafletJS Mapping
			
    Leaflet makes creating maps in the browser dead simple. With some HTML and 3 lines of JavaScript, we ...
    
			
    9. 
						
  9. mysqltuner
			
    http://mysqltuner.com/ MySQLTuner-perl MySQLTuner is a script written in Perl that will assist you w ...
    
			
    10. 
						
  10. C# 右键菜单 contextMenuStrip
			
    1.添加contextMenuStrip控件 默认命名:contextMenuStrip1 2.在要显示的控件上,找到其ContextMenuStrip属性,并设置其为contextMenuStrip ...
    
			
    11.