Script nori pe fundal

Discuție în 'Scripturi index' creată de #TrC, 20 Noi 2018.

  1. #TrC

    #TrC Fondator Infomanii Membru personal

    Înscris:
    11 Oct 2017
    Mesaje:
    1.009
    Aprecieri primite:
    1.130
    Puncte trofeu:
    425
    Sex:
    Masculin

    Demo:
    1.Infomanii - Din pasiune pentru jocuri !
    2.Infomanii - Din pasiune pentru jocuri !
    3.Infomanii - Din pasiune pentru jocuri !
    4.Infomanii - Din pasiune pentru jocuri !



    Fisier .css
    Cod:
    @keyframes move-twink-back {
        from {background-position:0 0;}
        to {background-position:-10000px 5000px;}
    }
    @-webkit-keyframes move-twink-back {
        from {background-position:0 0;}
        to {background-position:-10000px 5000px;}
    }
    @-moz-keyframes move-twink-back {
        from {background-position:0 0;}
        to {background-position:-10000px 5000px;}
    }
    @-ms-keyframes move-twink-back {
        from {background-position:0 0;}
        to {background-position:-10000px 5000px;}
    }
    @keyframes move-clouds-back {
        from {background-position:0 0;}
        to {background-position:10000px 0;}
    }
    @-webkit-keyframes move-clouds-back {
        from {background-position:0 0;}
        to {background-position:10000px 0;}
    }
    @-moz-keyframes move-clouds-back {
        from {background-position:0 0;}
        to {background-position:10000px 0;}
    }
    @-ms-keyframes move-clouds-back {
        from {background-position: 0;}
        to {background-position:10000px 0;}
    }
    .stars, .twinkling, .clouds {
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      width:100%;
      height:100%;
      display:block;
    }
    .stars {
      background:#000 url(images/stars.png) repeat top center;
      z-index:0;
    }
    .twinkling{
      background:transparent url(images/twinkling.png) repeat top center;
      z-index:1;
      -moz-animation:move-twink-back 200s linear infinite;
      -ms-animation:move-twink-back 200s linear infinite;
      -o-animation:move-twink-back 200s linear infinite;
      -webkit-animation:move-twink-back 200s linear infinite;
      animation:move-twink-back 200s linear infinite;
    }
    .clouds{
        background:transparent url(images/clouds.png) repeat top center;
        z-index:3;
      -moz-animation:move-clouds-back 200s linear infinite;
      -ms-animation:move-clouds-back 200s linear infinite;
      -o-animation:move-clouds-back 200s linear infinite;
      -webkit-animation:move-clouds-back 200s linear infinite;
      animation:move-clouds-back 200s linear infinite;
    }
    Adauga in index.html
    Cod:
    <div class="stars"></div>
    <div class="twinkling"></div>
    <div class="clouds"></div>