旋转圆链接动画

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了旋转圆链接动画相关的知识，希望对你有一定的参考价值。

a link with the class becomes circle animated rotating once and fading in
  1. .sp-circle-link {
  2. text-align: center;
  3. line-height: 100px;
  4. width: 100px;
  5. height: 100px;
  6. background: #fff;
  7. color: #3f1616;
  8. font-size: 25px;
  9.  
  10. -moz-border-radius: 50%;
  11. -webkit-border-radius: 50%;
  12. -o-border-radius: 50%;
  13. border-radius: 50%;
  14.  
  15. -webkit-animation: fadeInRotate 1s linear 16s backwards;
  16. -moz-animation: fadeInRotate 1s linear 16s backwards;
  17. -ms-animation: fadeInRotate 1s linear 16s backwards;
  18. animation: fadeInRotate 1s linear 16s backwards;
  19.  
  20. -webkit-transform: scale(1);
  21. -moz-transform: scale(1) ;
  22. -o-transform: scale(1);
  23. -ms-transform: scale(1);
  24. transform: scale(1);
  25. }
  26. .sp-circle-link:hover {
  27. background: #85373b;
  28. color: #fff;
  29. }
  30.  
  31. @-webkit-keyframes fadeInRotate{
  32. 0%{
  33. opacity: 0;
  34. -webkit-transform: scale(0) rotate(360deg);
  35.   }
  36. 100%{
  37. opacity: 1;
  38. -webkit-transform: scale(1) rotate(0deg);
  39.   }
  40. }
  41.  
  42. @-moz-keyframes fadeInRotate{
  43. 0%{
  44. opacity: 0;
  45. -moz-transform: scale(0) rotate(360deg);
  46.   }
  47. 100%{
  48. opacity: 1;
  49. -moz-transform: scale(1) rotate(0deg);
  50.   }
  51. }
  52. @keyframes fadeInRotate{
  53.   0%{
  54. opacity: 0;
  55. transform: scale(0) rotate(360deg);
  56.   }
  57.   100%{
  58. opacity: 1;
  59. transform: scale(1) rotate(0deg);
  60.   }
  61. }

以上是关于旋转圆链接动画的主要内容，如果未能解决你的问题，请参考以下文章

操纵 svg 圆原点以创建围绕中心的旋转动画

svg 虚线 圆 动画所以它旋转

WPF圆动画旋转边框内容渲染

css3动画如何使三张图片围饶一个圆在运动

动画制作小球围绕中心旋转的效果

圆球沿着椭圆轨迹做动画