CSS Box Animasi Dengan Effect Hover CSS Animasi
Welcome
To My Blog
CSS :
.boxanimasi {background: #e3e3e3;
border: 1px solid #666;
margin: auto;
width: 400px;
height: 200px;
cursor: pointer;
position: relative;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.boxanimasi::after {
content: '';
position: absolute;
width: 70%;
height: 10px;
bottom: 0;
left: 15%;
z-index: -1;
-webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
-moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
box-shadow: 0 9px 20px rgba(0,0,0,.4);
}
.boxanimasi > div {
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
background: #e3e3e3;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
font: 45px/200px bold helvetica, arial, sans-serif;
text-align: center;
text-shadow: 0 1px 0 white;
}
.boxanimasi > div:first-child {
position: relative;
z-index: 2;
}
.boxanimasi:hover {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.boxanimasi:hover > div:first-child {
opacity: 0;
}
.boxanimasi:hover div:last-child {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
HTML :
<div class="boxanimasi">
<div>
Welcome</div>
<div>
To My Blog</div>
</div>
Keseluruhan Kode Bila Di Pasang :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Design Template</title>
<style type="text/css">
.boxanimasi {
background: #e3e3e3;
border: 1px solid #666;
margin: auto;
width: 400px;
height: 200px;
cursor: pointer;
position: relative;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.boxanimasi::after {
content: '';
position: absolute;
width: 70%;
height: 10px;
bottom: 0;
left: 15%;
z-index: -1;
-webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
-moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
box-shadow: 0 9px 20px rgba(0,0,0,.4);
}
.boxanimasi > div {
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
background: #e3e3e3;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
font: 45px/200px bold helvetica, arial, sans-serif;
text-align: center;
text-shadow: 0 1px 0 white;
}
.boxanimasi > div:first-child {
position: relative;
z-index: 2;
}
.boxanimasi:hover {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.boxanimasi:hover > div:first-child {
opacity: 0;
}
.boxanimasi:hover div:last-child {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="boxanimasi">
<div>
Welcome</div>
<div>
To My Blog</div>
</div>
</body>
</html>
<div class="boxanimasi">
<div>
Welcome</div>
<div>
To My Blog</div>
</div>
Keseluruhan Kode Bila Di Pasang :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Design Template</title>
<style type="text/css">
.boxanimasi {
background: #e3e3e3;
border: 1px solid #666;
margin: auto;
width: 400px;
height: 200px;
cursor: pointer;
position: relative;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.boxanimasi::after {
content: '';
position: absolute;
width: 70%;
height: 10px;
bottom: 0;
left: 15%;
z-index: -1;
-webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
-moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
box-shadow: 0 9px 20px rgba(0,0,0,.4);
}
.boxanimasi > div {
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
background: #e3e3e3;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
font: 45px/200px bold helvetica, arial, sans-serif;
text-align: center;
text-shadow: 0 1px 0 white;
}
.boxanimasi > div:first-child {
position: relative;
z-index: 2;
}
.boxanimasi:hover {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.boxanimasi:hover > div:first-child {
opacity: 0;
}
.boxanimasi:hover div:last-child {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="boxanimasi">
<div>
Welcome</div>
<div>
To My Blog</div>
</div>
</body>
</html>
Selamat Mencoba dan Jika Tidak Ada Yang Di Mengerti Silahkan Bertanya dan Insyaallah Kami Bisa Membantu :D
No comments:
Post a Comment