1. <html>
  2. <head>
  3. <title>css3动画border旋转时的应用。</title>
  4. <meta charset="UTF-8"/>
  5. <style type="text/css">
  6. body{
  7. background: #ccc;
  8. }
  9. .he{
  10. width: 100px;
  11. height: 100px;
  12. margin: 200px auto;
  13. border: 10px solid black;
  14. border-left-color: #fff;
  15. border-radius: 70px;
  16. animation: namemf 1s linear infinite;
  17. -webkit-animation:namemf 1s linear infinite;
  18. -ms-animation: namemf 1s linear infinite;
  19. }
  20. @keyframes namemf{
  21. from{
  22. transform:rotate(0deg) ;
  23. }
  24. to{
  25. transform: rotate(360deg);
  26. }
  27. }
  28. @-webkit-keyframes namemf{
  29. from{
  30. transform:rotate(0deg) ;
  31. }
  32. to{
  33. transform: rotate(360deg);
  34. }
  35. }
  36. @-ms-keyframes namemf{
  37. from{
  38. transform:rotate(0deg) ;
  39. }
  40. to{
  41. transform: rotate(360deg);
  42. }
  43. }
  44.  
  45. </style>
  46. </head>
  47. <body>
  48. <div class="he">
  49.  
  50. </div>
  51. </body>
  52. </html>

效果图

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

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

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

  1. css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用

    <!DOCTYPE html> <html> <head> <title>css3动画使用技巧之—JQ配合css3实现轮播之animation-dela ...

  2. css3动画使用技巧之——transform-delay为负值时的应用。

    <html>    <head>        <title>css3动画delay为负值时的效果</title>        <meta ch ...

  3. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  4. css3动画应用-音乐唱片旋转播放特效

    css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...

  5. 使用CSS3动画属性实现各种旋转跳跃

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. tran ...

  6. !!学习笔记:CSS3动画

    一句话就有css3动画: 2016-6-29 <style type="text/css"> h1{background:#999;} h1:hover{border- ...

  7. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  8. 经验分享:多屏复杂动画CSS技巧三则

    当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画.并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出.例如上个月做的「企业QQ-新年祝福」活动: 感谢sh ...

  9. 如何使用js捕获css3动画

    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...

随机推荐

  1. 页面接口防刷 解决思路一nginx

    线上环境 很多接口 如果不做缓存 可能导致有人拿到url  每秒几万次的访问后台程序,导致系统down机. 此处, nginx可以加一层缓存. expires起到控制页面缓存的作用,合理的配置expi ...

  2. Wix#可以直接写C#代码来生成Wix的MSI安装文

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Wix#可以直接写C#代码来生成Wix的MSI安装文.

  3. PowerShell优化和性能测试

    measure-command -expression {$null = "abc"}  效率高于 {"abc" |out-null } foreach {$p ...

  4. DirectoryExists

    判断文件夹是否存在 关键点 GetFileAttributes The GetFileAttributes function retrieves attributes for a specified  ...

  5. spring mvc[转]

    Spring 注解学习手札(一) 构建简单Web应用 Spring 注解学习手札(二) 控制层梳理 Spring 注解学习手札(三) 表单页面处理 Spring 注解学习手札(四) 持久层浅析 Spr ...

  6. phpmailer,smtp发送邮件实例(转)

    一,用phpmailer发送邮件 查看复制打印? <?php   include "class.phpmailer.php";    //包函邮件发送类      //邮件发 ...

  7. drop table big_table 调试

    (gdb) thread apply all bt Thread (Thread )): # # /storage/innobase/os/os0sync.cc: # ) at /usr/src/my ...

  8. 【转】以XML文件方式保存用户数据——2013-08-25 22

    正在做项目中有很多游戏数据要保存,常见的玩家数据这些比较简单的可以用CCUserDefault.它是cocos2d-x用来存取基本数据类型用的.保存为XML文件格式. 主要方法:(和java的map很 ...

  9. 69 Spring Interview Questions and Answers – The ULTIMATE List--reference

    This is a summary of some of the most important questions concerning the Spring Framework, that you ...

  10. web项目设计与开发——DBHelper

    学习web项目设计与开发主要是在上学期web程序开发的基础上添上了思想和更深的理解. 在学习之前,我们需要下载好相关的软件——MyEclipse以及配置文件JDK.tomcat.再添加除MyEclip ...