css动画让精灵球动起来

在使用了css绘制三角形css绘制圆形后,搞了个今天这么高端的玩意,原本是准备创建婕洛的标识,但是发现线条控制不好。
css动画让精灵球动起来
所以选择精灵球来作为绘制的对象,如下

css动画让精灵球动起来

是不是瞬间有了童年的感觉。

代码实现

需用要的知识有

  • 背景图渐变
  • Transform 变换
  • Animation 动画
  • 兼容性问题
  1.    /*创建外边框*/
  2.     .border_round {
  3.         margin350px auto;
  4.         width100px;
  5.         height100px;
  6.         border1px solid #afafaf;
  7.     }
  8.     /*创建球体*/
  9.     .half_round {
  10.         width50px;
  11.         height50px;
  12.         border-radius: 50%;
  13.         border1px solid #333;
  14.         margin25px 25px;
  15.         /*背景图渐变,分了三个部分,透明部分(最好修改成白色),中间横条的部分,底部红色部分*/
  16.         background: -webkit-linear-gradient(transparent 0%, transparent 45%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 1) 55%, rgba(255, 0, 0, 1) 55%, rgba(255, 0, 0, 1) 100%);
  17.         background: -moz-linear-gradient(transparent 0%, transparent 45%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 1) 55%, rgba(255, 0, 0, 1) 55%, rgba(255, 0, 0, 1) 100%);
  18.         background: linear-gradient(transparent 0%, transparent 45%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 1) 55%, rgba(255, 0, 0, 1) 55%, rgba(255, 0, 0, 1) 100%);
  19.         /*动画执行*/
  20.         -webkit-animation: round_rotate 0.8s linear infinite;
  21.         -moz-animation: round_rotate 0.8s linear infinite;
  22.         animation: round_rotate 0.8s linear infinite;
  23.         positionabsolute;
  24.     }
  25. /*创建球体中间的按钮*/
  26.     .half_round_more {
  27.         positionrelative;
  28.         left21px;
  29.         top21px;
  30.         width4px;
  31.         height4px;
  32.         border2px solid #333;
  33.         border-radius: 50%;
  34.         background#fff;
  35.     }
  36.     /*动画动作*/
  37.     @-webkit-keyframes round_rotate {
  38.         0% {
  39.             transform: rotate(0deg);
  40.         }
  41.         50% {
  42.             transform: rotate(150deg);
  43.         }
  44.         100% {
  45.             transform: rotate(360deg);
  46.         }
  47.     }
  48.     @-moz-keyframes round_rotate {
  49.         0% {
  50.             transform: rotate(0deg);
  51.         }
  52.         50% {
  53.             transform: rotate(150deg);
  54.         }
  55.         100% {
  56.             transform: rotate(360deg);
  57.         }
  58.     }
  59.     @keyframes round_rotate {
  60.             0% {
  61.                 transform: rotate(0deg);
  62.             }
  63.             50% {
  64.                 transform: rotate(150deg);
  65.             }
  66.             100% {
  67.                 transform: rotate(360deg);
  68.             }
  69.         }
  70.     }

html部分

  1. <div class="border_round">
  2.     <div class="half_round">
  3.         <div class="half_round_more"></div>
  4.     </div>
  5. </div>

 

李金龙

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: