Salam senikoding
nah untuk membuat sebuah efek keren tidak harus menggunakan jquery ,cukup dengna penggunaan CSS3
sekarang kita akan membuat animasi FADE IN
langsung aja ni gan source nya
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@-webkit-keyframes fade
{
0%{
opacity : 1.0;
}
50%
{
opacity : 0.0;
}
100%
{
opacity : 1.0;
}
}
@keyframes fade
{
0%{
opacity : 1.0;
}
50%
{
opacity : 0.0;
}
100%
{
opacity : 1.0;
}
/*------------- background---------------*/
}
li
{
list-style:none
}
.fade-background
{
background : #00b5ff;
width : 100%;
border : none;
overflow : hidden;
border-top : 1px solid #999999;
border-bottom : 1px solid #999999;
text-align : center;
}
/*------------panggil efek fadenya-----------*/
.fade-button
{
color : rgb(255,255,255);
font-size : 25px;
padding : 15px 32px;
text-shadow : 0px 0px 5px rgb(255,00,00);
-webkit-animation : fade 4s linear 0s infinite alternate;
animation : fade 4s linear 0s infinite alternate;
}
ul
{
list-style-type : none;
margin : 0;
padding : 0;
}
.a
{
display : block;
width : 150px;
background : #b5a545;
padding : 15px 32px;
color : black;
overflow : hidden;
-webkit-transition-duration : 0.9s;
transition-duration : 0.9s;
}
.a:link
{
background : #ddffb5;
font-weight : bolder;
color : black;
text-decoration : none;
}
.a:visited
{
background : #00ffb5;
text-decoration : none;
color : #0000ff;
}
.a:hover
{
background : #00b5ff;
color : #000000;
font-weight : bolder;
-webkit-animation : fade 2s linear 0s 1 alternate;
animation : fade 2s linear 0s 1 alternate;
}
.a:active
{
background : #009955;
-webkit-animation : fade 2s linear 0s 1 alternate;
animation : fade 2s linear 0s 1 alternate;
}
.demo
{
background : #009955;
border-radius : 2px;
text-align : center;
}
</style>
</head>
<body>
<div class="fade-background">
<div class="fade-button">Fade efek! </div>
</div>
<div class="demo">Tips untuk mencoba demo: <br />
Hover link dibawah ini ( untuk pengguna komputer )| Klik link dibawah ini (untuk pengguna ponsel )
</div>
<ul>
<li><br /><a name="#wow"class="a">KLIK ATAU HOVER MENU DIBAWAH INI<br /></a><br />
<li><br /><a href="#wow"class="a">Beranda<br /></a><br /></li><br /><br /><br />
<li><br /><a href="#wow"class="a">Berita<br /></a><br /></li><br /><br /><br />
</ul><div class="demo">link dengan efek fade in dan fade out</div>
</body>
</html>
sekian tutorial kita kali
0 komentar:
Posting Komentar