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 HTMLwidth: 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("
-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;
}
}
<body>
<div class="salju snow ">
</div >
</body>NB:
Pada bumbu CSS, gantikan tulisanHOST-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 propertiestiming pada propertiesdiv 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 :)
Pada bumbu CSS, gantikan tulisan
-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 -webkit-animation-duration: 6s ;
animation-duration: 6s; Dalam memasukan markup HTML <Happy falling effect \m/
Tidak ada komentar:
Posting Komentar