css动画让精灵球动起来

  • A+
所属分类：生活随记

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

css动画让精灵球动起来

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

代码实现

需用要的知识有

  • 背景图渐变
  • Transform 变换
  • Animation 动画
  • 兼容性问题
  1.    /*创建外边框*/
  2.     .border_round {
  3.         margin: 350px auto;
  4.         width: 100px;
  5.         height: 100px;
  6.         border: 1px solid #afafaf;
  7.     }
  8.     /*创建球体*/
  10.     .half_round {
  11.         width: 50px;
  12.         height: 50px;
  13.         border-radius: 50%;
  14.         border: 1px solid #333;
  15.         margin: 25px 25px;
  16.         /*背景图渐变,分了三个部分，透明部分（最好修改成白色），中间横条的部分，底部红色部分*/
  17.         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%);
  18.         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%);
  19.         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%);
  20.         /*动画执行*/
  21.         -webkit-animation: round_rotate 0.8s linear infinite;
  22.         -moz-animation: round_rotate 0.8s linear infinite;
  23.         animation: round_rotate 0.8s linear infinite;
  24.         position: absolute;
  25.     }
  27. /*创建球体中间的按钮*/
  28.     .half_round_more {
  29.         position: relative;
  30.         left: 21px;
  31.         top: 21px;
  32.         width: 4px;
  33.         height: 4px;
  34.         border: 2px solid #333;
  35.         border-radius: 50%;
  36.         background: #fff;
  37.     }
  38.     /*动画动作*/
  40.     @-webkit-keyframes round_rotate {
  41.         0% {
  42.             transform: rotate(0deg);
  43.         }
  44.         50% {
  45.             transform: rotate(150deg);
  46.         }
  47.         100% {
  48.             transform: rotate(360deg);
  49.         }
  50.     }
  52.     @-moz-keyframes round_rotate {
  53.         0% {
  54.             transform: rotate(0deg);
  55.         }
  56.         50% {
  57.             transform: rotate(150deg);
  58.         }
  59.         100% {
  60.             transform: rotate(360deg);
  61.         }
  62.     }
  63.     @keyframes round_rotate {
  64.             0% {
  65.                 transform: rotate(0deg);
  66.             }
  67.             50% {
  68.                 transform: rotate(150deg);
  69.             }
  70.             100% {
  71.                 transform: rotate(360deg);
  72.             }
  73.         }
  74.     }

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: