24 Tem 2021 19:26 Yeni Konu Oluştur

Haberler:

Üye kayıt esnasında E-posta adresinizin doğru olduğuna ve Aktivasyon Mailinize bakmayı unutmayın.


Arkaplana basit css bulut animasyonu ekleme

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

« önceki - sonraki »

0 Üyeler ve 2 Ziyaretçiler konuyu incelemekte.

*

  1. 3,094

  2. 585

  3. 982
01 Ağu 2014 18:13 Son düzenlenme: 01 Ağu 2014 18:35 Smfci

[IMG]http://i.imgur.com/mlcZL6C.jpg[/img]

index.templatede bul
echo '
</head>
<body>

arkasına ekle
<div id="clouds">
<div class="cloud x1"></div>
<!-- Time for multiple clouds to dance around -->
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>

index.css de en alta ekle
#clouds{
position: absolute;
z-index: -1;
margin-top: 110px;
}

/*Time to finalise the cloud shape*/
.cloud {
width: 200px; height: 60px;
background: #fff;

border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;

position: relative;
}

.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;

border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;

-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}

.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}

/*Time to animate*/
.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
left: 200px;

-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6; /*opacity proportional to the size*/

/*Speed will also be proportional to the size and opacity*/
/*More the speed. Less the time in 's' = seconds*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}

.x3 {
left: -250px; top: -200px;

-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/

-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}

.x4 {
left: 470px; top: -250px;

-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75; /*opacity proportional to the size*/

-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}

.x5 {
left: -150px; top: -150px;

-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/

-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}

@-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}


MENU ×