Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
efek animasi
https://goo.gl/photos/F6bpXRfyLiLDbGz58 gan pakai efek apa yah supaya tombol menu saat di hover jadi mengecil saya pakai bootstrap dan css3 jadi ada efek animasinya gitu gan mohon di jawab thanks
5 Jawaban:
Bisa aja padding atau margin nya dikecilin.. Coba tampilkan kode mu gan disini.. pake tag [] disudut kiri atas submit jawaban ini..
kalau nyantumin codenya lebih enak
tp contoh sederhananya gini
css
//sebelum di hover
.nama-class{
background-color:red;
transition:background-color 0.6s;
}
//saat di hover jadi kuning
.nama-class:hover{
background-color:yellow;
}
properti transition yang ngebuat perpindahan dari state pertama ke state 2; Property Description transition A shorthand property for setting the four transition properties into a single property transition-delay Specifies a delay (in seconds) for the transition effect transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete transition-property Specifies the name of the CSS property the transition effect is for transition-timing-function Specifies the speed curve of the transition effect
contoh shorthand transition /\* transition : property name | duration | timing function | delay */ transition: width 2s linear 1s;
kalo mau di support banyak browser tinggal kasih prefix -webkit-, -moz-, atau -o-
ini yang CSS
* {
margin: 0;
padding: 0;
}
.container-fluid {
padding: 0;
}
.bg {
width: 100%;
height: 100%;
float: left;
left: 0;
position: fixed;
z-index: -6;
}
.navbar-inverse {
width: 100%;
height: 100%;
border-radius: 0;
border: 1px solid white;
text-align: center;
background: #643737;
padding: 10px;
perspective: 90px;
}
.navbar-inverse .navbar-nav li a {
font-weight: bold;
font-size: 14px;
color: white;
}
.navbar-inverse .navbar-nav:hover,
.navbar-inverse .navbar-nav:focus {
animation-name: navbar-ganti;
animation-duration: 5s;
}
@keyframes navbar-ganti {
20% {
transform: translateZ(100px);
}
}
ini HTML nya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scala=1">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="home.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
<img src="media/mountain_1917441.jpg" class="bg">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
<span class="glyphicon glyphicon-th"></span>
</button>
<a href="#" class="navbar-brand">HEMBREW</a>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav">\
<li><a href="#">Home</a></li>
<li><a href="#">Kelas</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Kontak</a></li>
</ul>
<form role="search" class="navbar-form navbar-right">
<div class="form-group">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" placeholder="Cari...">
<button type="submit" class="btn btn-primary">Cari</button>
</div>
</form>
</div>
</nav>
</div>
</body>
</html>