16 May 2021 22:11 Yeni Konu Oluştur

Haberler:

Sitemiz Smf 2.1 ve Smf 2.0 sürümleri için Destek ve Tema paylaşım forumudur


Arkaplana css bulut ve ay animasyonu ekleme

Başlatan snrj, 01 Ağu 2014 19:19

« önceki - sonraki »

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

*

  1. 3,078

  2. 584

  3. 964






index.template.php de bul
echo '
</head>
<body>

arkasına ekle
<div style="margin-bottom: -420px;"><div class="sky">
   
    <div class="moon"></div>
   
        <div class="clouds_one"></div>

        <div class="clouds_two"></div>

        <div class="clouds_three"></div>
    </div></div>


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ştir
body
{
-webkit-animation:sky_background 50s ease-out infinite;
-moz-animation:sky_background 50s ease-out infinite;
-o-animation:sky_background 50s ease-out infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);

font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 15px 0;
}

.sky {z-index: -1;margin-top: -15px;
height:480px;
background:#007fd5;
position:relative;
overflow:hidden;
-webkit-animation:sky_background 50s ease-out infinite;
-moz-animation:sky_background 50s ease-out infinite;
-o-animation:sky_background 50s ease-out infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}


.moon {
background:url("http://montanaflynn.me/lab/css-clouds/images/moon.png");
position:absolute;
left:0;
height:100%;
width:300%;
-webkit-animation:moon 50s linear infinite;
-moz-animation:moon 50s linear infinite;
-o-animation:moon 50s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}


.clouds_one {
background:url("http://montanaflynn.me/lab/css-clouds/images/cloud_one.png");
position:absolute;
left:0;
top:0;
height:100%;
width:300%;
-webkit-animation:cloud_one 50s linear infinite;
-moz-animation:cloud_one 50s linear infinite;
-o-animation:cloud_one 50s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}

.clouds_two {
background:url("http://montanaflynn.me/lab/css-clouds/images/cloud_two.png");
position:absolute;
left:0;
top:0;
height:100%;
width:300%;
-webkit-animation:cloud_two 75s linear infinite;
-moz-animation:cloud_two 75s linear infinite;
-o-animation:cloud_two 75s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}

.clouds_three {
background:url("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png");
position:absolute;
left:0;
top:0;
height:100%;
width:300%;
-webkit-animation:cloud_three 100s linear infinite;
-moz-animation:cloud_three 100s linear infinite;
-o-animation:cloud_three 100s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}

@-webkit-keyframes sky_background {
0% {
background:#007fd5;
color:#007fd5
}

50% {
background:#000;
color:#a3d9ff
}

100% {
background:#007fd5;
color:#007fd5
}
}

@-webkit-keyframes moon {
0% {
opacity: 0;
left:-200%
-moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
}

50% {
opacity: 1;
-moz-transform: scale(1);
left:0%
bottom:250px;
  -webkit-transform: scale(1);
}

100% {
opacity: 0;
bottom:500px;
-moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
}
}

@-webkit-keyframes cloud_one {
0% {
left:0
}

100% {
left:-200%
}
}

@-webkit-keyframes cloud_two {
0% {
left:0
}

100% {
left:-200%
}
}

@-webkit-keyframes cloud_three {
0% {
left:0
}

100% {
left:-200%
}
}

@-moz-keyframes sky_background {
0% {
background:#007fd5;
color:#007fd5
}

50% {
background:#000;
color:#a3d9ff
}

100% {
background:#007fd5;
color:#007fd5
}
}

@-moz-keyframes moon {
0% {
opacity: 0;
left:-200%
-moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
}

50% {
opacity: 1;
-moz-transform: scale(1);
left:0%
bottom:250px;
  -webkit-transform: scale(1);
}

100% {
opacity: 0;
bottom:500px;
-moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
}
}

@-moz-keyframes cloud_one {
0% {
left:0
}

100% {
left:-200%
}
}

@-moz-keyframes cloud_two {
0% {
left:0
}

100% {
left:-200%
}
}

@-moz-keyframes cloud_three {
0% {
left:0
}

100% {
left:-200%
}
}


MENU ×