Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
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>