<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. 动态加载JS文件，并根据JS文件的加载状态来执行自己的回调函数
			
    动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...
    
			
    2. 
						
  2. 【剪枝】HDU 1010——tempter of the bone
			
    来源:点击打开链接 看上去数据规模很小,但是必须要剪枝,否则直接爆TLE. 通过这个题可以练习奇偶剪枝. 另外:还有一个优化方式,如果所有步数走完了门还没关,则直接返回结果"NO" ...
    
			
    3. 
						
  3. IIS7错误：“Web服务器被配置为不列出此目录的内容”的解决办法
			
    IIS7错误:“Web服务器被配置为不列出此目录的内容”的解决方法: 在"操作"下,点启用,此按钮将变成禁用,则可消除此错误
    
			
    4. 
						
  4. WindDbug应用
			
    Windbg是windows平台上的一款相当强大的调试工具,可以从msdn网站下载得到,最新版本包含在windows sdk中,默认会被安装在C:\Program Files\Debugging To ...
    
			
    5. 
						
  5. Installing the PHP/MongoDB extension on Mac OSX 10.8
			
    Installing PHP/MongoDB extension is a two steps task on OSX: Install the autoconf tool required for  ...
    
			
    6. 
						
  6. js获取浏览器类型
			
    function add(){ var userAgent = navigator.userAgent, rMsie = /(msie\s|trident.*rv:)([\w.]+)/, rFiref ...
    
			
    7. 
						
  7. cocos2d-x增加控制台程序代码
			
    #include "main.h" #include "AppDelegate.h" #include "CCEGLView.h" USIN ...
    
			
    8. 
						
  8. int 0x13中断的參数传递
			
    int 0x13中断向量所指向的中断服务程序实质上就是磁盘服务程序. 用途:将指定扇区的代码载入到内存的指定位置. 因此,在使用int 0x13中断时要将參数传递给服务程序: 比如:将指定扇区和载入的 ...
    
			
    9. 
						
  9. ORACLE ------MYSQL2014 大会 PPT
			
    https://oracleus.activeevents.com/2014/connect/focusOnDoc.do?focusID=17888
    
			
    10. 
						
  10. 认识CoreData-使用进阶
			
    之前两篇文章都比较偏理论,文字表达比较多一些,但都是干货!学习时先理解理论知识,才能更好的帮助后面的理解.   在这篇文章中,将会涉及关于CoreData的一些复杂操作,这些操作会涉及分页查询.模糊查 ...
    
			
    11.