إضافة كرات متحركة بجانب الشعار في مدونات بلوجر

مرحبا متابعينا الكرام اليوم شرح خارج العادة وهو عن إضافة جميلة جدا

 وحصرية على موقعنا وهي عبارة عن إضافة لقوالب بلوجر تمكنك من وضع

 كرات متحركة بجانب الشعار بطريقة سهلة جدا

ماعليك سوى تتبع هذا الشرح البسيط بالفيديو وستتمكن من ذلك

الكود المستعمل

<div id="ball">
<style>
                    :host {
                      display: inline-block;
                      height: 24px;
                      position: relative;
                      width: 24px;
                    }
                    @-webkit-keyframes animPos {
                      0% { -webkit-transform: translate(-98%, 0);}
                      100% { transform: translate(98%, 0); }
                    }
                    @-webkit-keyframes animZOrder {
                      0% { z-index: 100; }
                      100% { z-index: 1; }
                    }
                    @keyframes animPos {
                      0% { -moz-transform: translate(-98%, 0);}
                      100% { transform: translate(98%, 0); }
                    }
                    @keyframes animZOrder {
                      0% { z-index: 100; }
                      100% { z-index: 1; }
                    }
                    div#ball {
                      margin-left: 19px;
                      float: left;
                    }
                    .outer {
                      -webkit-animation: animZOrder 3520ms linear infinite;
                      -moz-animation: animZOrder 3520ms linear infinite;
                      height: 10px;
                      position: absolute;
                      width: 11px;
                    }
                    .inner {
                      -webkit-animation: animPos 880ms cubic-bezier(0.445, 0.05, 0.55, 0.95)
                        infinite alternate;
                      -moz-animation: animPos 880ms cubic-bezier(0.445, 0.05, 0.55, 0.95)
                        infinite alternate;
                      -webkit-transform: rotate(90deg);
                      -moz-transform: rotate(90deg);
                      border-radius: 50%;
                      height: 100%;
                      position: absolute;
                      width: 100%;
                    }
                    .ball0 {
                      -webkit-animation-delay: 2640ms;
                      -webkit-transform: rotate(45deg);
                      -moz-animation-delay: 2640ms;
                      -moz-transform: rotate(45deg);
                    }
                    .ball1 {
                      -webkit-animation-delay: 1760ms;
                      -webkit-transform: rotate(135deg);
                      -moz-animation-delay: 1760ms;
                      -moz-transform: rotate(135deg);
                    }
                    .ball2 {
                      -webkit-transform: rotate(225deg);
                      -moz-transform: rotate(225deg);
                    }
                    .ball3 {
                      -webkit-animation-delay: 880ms;
                      -webkit-transform: rotate(315deg);
                      -moz-animation-delay: 880ms;
                      -moz-transform: rotate(315deg);
                    }
                    .ball0 .inner { background: linear-gradient(315deg, #05d, #07f, #07f); }
                    .ball1 .inner { background: linear-gradient(225deg, #d00, #e33, #f75); }
                    .ball2 .inner { background: linear-gradient(90deg, #074, #094, #5b5); }
                    .ball3 .inner { background: linear-gradient(0deg, #fa3, #fc0, #fd6); }
                  </style>
<div class="outer ball0">
<div class="inner"></div>
</div>
<div class="outer ball1">
<div class="inner"></div>
</div>
<div class="outer ball2">
<div class="inner"></div>
</div>
<div class="outer ball3">
<div class="inner"></div>
</div>
</div>