Make Rain or Snow Falling Effects use CSS3 - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make Rain or Snow Falling Effects use CSS3, we have prepared well for this article you read and download the information therein. hopefully fill posts Article CSS, Article CSS3, Article HTML, Article Trik dan Tips, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Make Rain or Snow Falling Effects use CSS3
link : Make Rain or Snow Falling Effects use CSS3

Make Rain or Snow Falling Effects use CSS3

Update trik dari postingan sebelumnya tentang creativity using CSS keyframe animations. Sekarang AA Koben akan berbagi kembali trick membuat efek salju dan hujan menggunakan CSS3. Tutorial ini datang dari web keren dengan judul asli "Create Rain & Snow Falling Effects using CSS3 – weather.css"
Trick weather.css menyertakan sebuah gambar dalam menampilkan efek rain/snow yang di rangkai dengan bumbu CSS3 animation keyframes! Masukan bumbu CSS di tempat semestinya :D

.salju {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.salju:before,.salju:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
background: transparent repeat;
opacity: 0.5;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-animation-name: salju;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-name: salju1;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.salju:after {
opacity: 0.8;
-webkit-animation-name: salju1;
animation-name: salju1;
}
.salju.snow:before,.salju.snow:after {
background-image: url("HOST-LINK-IMAGE-SNOW/RAIN.PNG");
-webkit-animation-duration: 6s;
animation-duration: 6s;
}
.salju.snow:after {
-webkit-animation-duration: 4.5s;
animation-duration: 4.5s;
}
@-webkit-keyframes salju {
from {
background-position: 0 0;
}
to {
background-position: 0 1024px;
}
}
@keyframes salju {
from {
background-position: 0 0;
}
to {
background-position: 0 1024px;
}
}
@-webkit-keyframes salju1 {
from {
background-position: 64px 64px;
}
to {
background-position: 64px 1088px;
}
}
@keyframes salju1 {
from {
background-position: 64px 64px;
}
to {
background-position: 64px 1088px;
}
}

Planing HTML

<body>
 <div class="salju snow">

 </div>
</body>

NB:
Pada bumbu CSS, gantikan tulisan HOST-LINK-IMAGE-SNOW/RAIN.PNG dengan link host gambar hujan/salju. Gue sudah siapkan, silahkan tinggal hostingkan. Snow Picture atau Rain Picture Pilih salah satu saja! Pada property .salju:before,.salju:after sobat bisa merubah arah jatuhnya snow/rain dengan merubah angka pada kode properties

-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);

Untuk kecepatan jatuhnya snow/rain perhatikan pada property .salju.snow:before,.salju.snow:after dan .salju.snow:after rubahlan nominal timing pada properties

-webkit-animation-duration: 6s;
animation-duration: 6s;

Dalam memasukan markup HTML <div class="salju snow"> harus di dalam tagging <body> Bisa juga di dalam tagging <main-wrapper> tergantung unik-ID pada template masing-masing. Demikian dan terima kasih :)

Happy falling effect \m/

Thus articles Make Rain or Snow Falling Effects use CSS3

that is all articles Make Rain or Snow Falling Effects use CSS3 This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make Rain or Snow Falling Effects use CSS3 with the link address https://autopostingblogspot.blogspot.com/2015/05/make-rain-or-snow-falling-effects-use.html

Make Rain or Snow Falling Effects use CSS3

Make Rain or Snow Falling Effects use CSS3

Thus articles Make Rain or Snow Falling Effects use CSS3

0 Response to "Make Rain or Snow Falling Effects use CSS3"

Posting Komentar

Make Rain or Snow Falling Effects use CSS3

Also Read

Make Rain or Snow Falling Effects use CSS3

Thus articles Make Rain or Snow Falling Effects use CSS3

0 Response to "Make Rain or Snow Falling Effects use CSS3"

Posting Komentar