Arkaplana basit css animasyonu ekleme

Başlatan snrj, 01 Ağu 2014 18:34

« önceki - sonraki »

0 Üyeler ve 1 Ziyaretçi konuyu incelemekte.

*

  1. 3,108

  2. 587

  3. 1001

[IMG]http://i.imgur.com/qBbppuL.jpg[/img]
index.css de bul
body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 15px 0;
}

değişitir
body
{
height: 100%;
  font-size: 1em;
  background-color: hsl(60,0%,20%);
  background-image:
    /* 1 */
    radial-gradient(
      white 10%,
      hsla(0,0%,100%,0) 11%
      ),
    /* 2 */
    radial-gradient(
      white 10%,
      hsla(0,0%,100%,0) 11%
      ),
    /* 3 */
    radial-gradient(
      white 8%,
      hsla(0,0%,100%,0) 9%
      ),
    /* 4 */
    radial-gradient(
      white 6%,
      hsla(0,0%,100%,0) 7%
      ),
    /* 5 */
    radial-gradient(
      white 6%,
      hsla(0,0%,100%,0) 7%
      ),
    /* 6 */
    radial-gradient(
      white 8%,
      hsla(0,0%,100%,0) 9%
      ), 
    /* 7 */
    radial-gradient(
      white 10%,
      hsla(0,0%,100%,0) 11%
      ),
    /* 8 */
    radial-gradient(
      white 10%,
      hsla(0,0%,100%,0) 11%
      ),
   
    linear-gradient(
      hsl(220,80%,70%),
      hsl(0,60%,80%)
      );
  background-position:
    calc(50% - 5em) 50%,/* 1 */
    calc(50% - 2.5em) calc(50% - 1.5em),/* 2 */
    50% calc(50% - 2em),/* 3 */
    calc(50% + 2.5em) calc(50% - 1.5em),/* 4 */
   
    calc(50% - 5em) 50%,/* 5 */
    calc(50% - 2.5em) calc(50% + 1.5em),/* 6 */
    50% calc(50% + 2em),/* 7 */
    calc(50% + 2.5em) calc(50% + 1.5em),/* 8 */
   
    0 50%;   
    background-size:
      10em 10em,
      10em 10em,
      10em 10em,
      10em 10em,
   
      10em 10em,
      10em 10em,
      10em 10em,
      10em 10em,
     
      100% 100%;
  background-repeat: repeat-x;
  animation: .25s ring linear infinite;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 15px 0;
}
@keyframes ring {
  0% {
    background-position:
      calc(50% - 5em) 50%,/* 1 */
      calc(50% - 2.5em) calc(50% - 1.5em),/* 2 */
      50% calc(50% - 2em),/* 3 */
      calc(50% + 2.5em) calc(50% - 1.5em),/* 4 */
     
      calc(50% - 5em) 50%,/* 5 */
      calc(50% - 2.5em) calc(50% + 1.5em),/* 6 */
      50% calc(50% + 2em),/* 7 */
      calc(50% + 2.5em) calc(50% + 1.5em),/* 8 */
     
      0 50%; 
    }
  100% {
    background-position:
      calc(50% - 2.5em) calc(50% - 1.5em),/* 1 */
      50% calc(50% - 2em),/* 2 */
      calc(50% + 2.5em) calc(50% - 1.5em),/* 3 */
      calc(50% + 5em) 50%,/* 4 */
     
      calc(50% - 2.5em) calc(50% + 1.5em),/* 5 */
      50% calc(50% + 2em),/* 6 */
      calc(50% + 2.5em) calc(50% + 1.5em),/* 7 */
      calc(50% + 5em) 50%,/* 8 */
     
      0 50%; 
    }
  }


MENU ×