Print this pageBerikut ini saya tampilkan contoh script untuk membuat slide mouse, boleh anda coba dan semoga bermanfaat
<html>
<body>
<style>
.TJcoveraka {
position: relative;
width: 400px; /* lebar */
height: 25px; /* tinggi */
margin: 10px auto;
background-color: #eee;/* warna background dalam */
z-index: 1;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.TJcoveraka p {color:black;
text-align:center;
margin: 0;
}
.left_gate {
position: absolute;
background: green;/* warna pintu B */
bottom: 0; right: 50%; left: 0; top: 0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.TJcoveraka:hover .left_gate {
right: 100%; left: -50%;
}
.right_gate {
position:absolute;
background:red;/* warna pintu A */
bottom: 0;
left: 50%;
right:0;top:0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.TJcoveraka:hover .right_gate {
left: 100%; right: -50%;
}
.slide_in {
overflow:hidden;
}
.slide_in .left_gate {
background: blue;/* warna pintu A */
}
.slide_in .right_gate {
background: maroon;/* warna pintu B */
}</style>
<div class="TJcoveraka">
<div class="left_gate"></div>
<div class="right_gate"></div>
<p>MASUKKAN TEKS ANDA DISINI</p>
</div>
<div class="TJcoveraka slide_in">
<div class="left_gate"></div>
<div class="right_gate"></div>
<p>MASUKKAN TEKS ANDA DISINI</p>
</div>
</body>
</html>
Lihat Cintoh Berikut Ini
MASUKKAN TEKS ANDA DISINI
Artikel Terkait
A M A R A J E N
0 komentar
Posting Komentar