<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. sublime text高亮less
			
    1.打开sublime,ctrl+shift+p打开命令面板,找到package control:install Package,然后选择less2css,回车. 2.继续ctrl+shift+p打开 ...
    
			
    2. 
						
  2. 皮皮果模式系统开发app
			
    皮皮果系统定制开发,皮皮果网站系统开发. 皮皮果游戏横空出世,比QQ农场有过之而无不及,深得广大玩家喜爱.无论草根百姓还是达官贵人,都可以来学习娱乐的游戏.让你在娱乐中收获物质生活和精神生活,英伦果园 ...
    
			
    3. 
						
  3. 剖析iphone之触摸事件touchstart
			
    今天做项目发现一个问题,貌似从前没有遇到过,就记录一下,以后方便看.....(代码只显示了js这部分 样式结构都会写) 一般我们绑定click触发事件都是直接用onclick 或者方便一点click, ...
    
			
    4. 
						
  4. SpringMVC学习系列 之 表单标签
			
    http://www.cnblogs.com/liukemng/p/3754211.html 本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图 ...
    
			
    5. 
						
  5. 基于Cloudera Manager5配置HIVE压缩
			
    [Author]: kwu 基于Cloudera Manager5配置HIVE压缩,配置HIVE的压缩.实际就是配置MapReduce的压缩,包含执行结果及中间结果的压缩. 1.基于HIVE命令行的配 ...
    
			
    6. 
						
  6. Android - Shared Preference (分享首选项) 具体解释
			
    Shared Preference (分享首选项) 具体解释 本文地址: http://blog.csdn.net/caroline_wendy/article/details/24454963 Sh ...
    
			
    7. 
						
  7. 使用viewpager实现广告条轮询的效果
			
    先上效果图: viewpager是google在v4-support包中提供的,使用时与listview类似,度需要提供一个adapter, 只不过viewpager提供的是PagerAdapter  ...
    
			
    8. 
						
  8. 【代码优化】坚持使用Override注解
			
    对于传统程序猿,注解里面最重要的就是Override注解了.这里的注解,都是指仅仅能用在方法中的声明, 她表示被注解的方法用于覆盖了父类的一个声明,假设坚持使用这个注解,能够防止一大类的非法错误. & ...
    
			
    9. 
						
  9. RHCA学习笔记:RH442-Unit9内核定时与进程延时
			
      Unit 9 Kernel Timing and Process Latency 内核定时与进程延时 学习目标: A.了解CPU 是怎样追踪时间的 B.调整CPU的访问次数 C.调整调度延时 D. ...
    
			
    10. 
						
  10. 如何测试mysql是否安装成功
			
    1.命令行:net start mysql如果能启动,那说明安装成功了.如果想查询默认的数据库,你可以用mysqlfont,或者直接命令行操作进入安装目录下的bin文件夹,或者配置好环境变量,然后2. ...
    
			
    11.