<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. Ubuntu 14.10安装SecureCRT 7.3
			
    Ubuntu 14.10下安装SecureCRT 7.3 1.软件准备 Ubuntu14.10 x64 SecureCRT7.3的版本:scrt-7.3.0-657.ubuntu13-64.x86_6 ...
    
			
    2. 
						
  2. 实战RPM包制作
			
    在开发中经常会用到一些rpm包,但是一直没有自己手动制作过.今天在制作的时候意外地还解决了自己以前一直困惑的问题,就是怎么制作rpm debuginfo包,类似CentOS官网那样的debuginfo ...
    
			
    3. 
						
  3. CentOS 配置httpd使局域网能够正常訪问
			
    [转载请注明出处: 钱国正的专栏http://blog.csdn.net/qianguozheng/article/details/37611859] 问题: 在CentOS上安装apache,配置好 ...
    
			
    4. 
						
  4. Android图片压缩
			
    import java.io.File;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java ...
    
			
    5. 
						
  5. cocos2d-x增加控制台程序代码
			
    #include "main.h" #include "AppDelegate.h" #include "CCEGLView.h" USIN ...
    
			
    6. 
						
  6. linux 内核  编绎配制选项详解
			
    http://blog.sina.com.cn/s/blog_8308bc810102ux0j.html
    
			
    7. 
						
  7. oracle drop table and purge
			
    一.drop表 执行drop table xx 语句 drop后的表被放在回收站(user_recyclebin)里,而不是直接删除掉.这样,回收站里的表信息就可以被恢复,或彻底清除. 通过查询回收站 ...
    
			
    8. 
						
  8. 操作系统-mac安装linux（Ubuntu）
			
    mac安装linux 安装linux,分为两步: 1. 制作linux启动U盘 2. 通过启动U盘,安装Ubuntu系统 Mac OS X下创建USB启动盘 格式化USB驱动盘 下载Ubuntu桌面版 ...
    
			
    9. 
						
  9. windows 下 node 多版本管理工具 - gnvm
			
    最近写了各个构建工具, 开发环境为mac,需要在windows下测试通过: 因为很久不用windows,windows下的node 版本还是 0.10.* 的,因此决定升级node mac 下我使用的 ...
    
			
    10. 
						
  10. jQuery滑过头像图片展示个人信息效果
			
    这是一款经典的jQuery图片插件,同时,也可以是一款jQuery提示框插件.这款jQuery插件的功能是当你把鼠标滑过头像图片缩略图时,即可弹出头像对应用户的详细个人信息,弹出的标签虽然不大,但是还 ...
    
			
    11.