آموزش ساخت لودینگ زیبا برای سایت

آموزش ساخت لودینگ زیبا برای سایت

برای اینکه بتوانید برای سایت خود یک لودینگ زیبا داشته باشید باید طبق دستور العمل زیر عمل کنید:

1- کدهای HTML زیر را بنویسید:

<svg width="200" height="200" viewBox="0 0 100 100">
  <polyline class="line-cornered stroke-still" points="0,0 100,0 100,100" stroke-width="10" fill="none"></polyline>
  <polyline class="line-cornered stroke-still" points="0,0 0,100 100,100" stroke-width="10" fill="none"></polyline>
  <polyline class="line-cornered stroke-animation" points="0,0 100,0 100,100" stroke-width="10" fill="none"></polyline>
  <polyline class="line-cornered stroke-animation" points="0,0 0,100 100,100" stroke-width="10" fill="none"></polyline>
</svg>

2-کدهای CSS زیر را بنویسید:

body {
  background: #282828;
}

svg {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1);
          transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.stroke-still {
  stroke: #232323;
}

.stroke-animation {
  -webkit-animation: stroke-spacing 1.2s ease-in, stroke-color 4.8s linear;
          animation: stroke-spacing 1.2s ease-in, stroke-color 4.8s linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-delay: 0;
          animation-delay: 0;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}

@-webkit-keyframes stroke-spacing {
  0%
{
    stroke-dasharray: 0 200;
  }
  45% {
    stroke-dashoffset: 0;
    stroke-dasharray: 200 200;
  }
  90% {
    stroke-dashoffset: -200;
    stroke-dasharray: 200 200;
  }
  100% {
    stroke-dashoffset: -200;
    stroke-dasharray: 200 200;
  }
}

@keyframes stroke-spacing {
  0%
{
    stroke-dasharray: 0 200;
  }
  45% {
    stroke-dashoffset: 0;
    stroke-dasharray: 200 200;
  }
  90% {
    stroke-dashoffset: -200;
    stroke-dasharray: 200 200;
  }
  100% {
    stroke-dashoffset: -200;
    stroke-dasharray: 200 200;
  }
}

@-webkit-keyframes stroke-color {
  0% 
{ stroke: #3498DB; }
  24% { stroke: #643232; }
  25% { stroke: #327864; }
  49% { stroke: #327864; }
  50% { stroke: #32326e; }
  74% { stroke: #32326e; }
  75% { stroke: #78325a; }
  99% { stroke: #78325a; }
}

@keyframes stroke-color {
  0% 
{ stroke: #3498DB; }
  24% { stroke: #643232; }
  25% { stroke: #327864; }
  49% { stroke: #327864; }
  50% { stroke: #32326e; }
  74% { stroke: #32326e; }
  75% { stroke: #78325a; }
  99% { stroke: #78325a; }
}

 


این مقاله فایلی برای دانلود ندارد
برای ارسال نظر نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.