Xin chào các bạn chắc các bạn cũng biết Css Animation thì hôm nay mình share intro cũng sử dụng hiện ứng đó cực đẹp...
Cách thực hiện
Bước 1: Ta chèn đoạn code phía dưới vào trước thẻ]]></b:skin>
#intro_homepage{ position: relative;Bước 2: Ta chèn code bên dưới vào nới bạn muốn hiển thị..
display: table;
width: 100%;
height: 200px;
margin: 0!important;
padding: 0!important;
z-index: 999;
background-size: cover!important;
background: #3c3c3c;}
.intro_homepage_content{position:relative;z-index:3}
.intro_label h2{animation:zoomInUp 6s;font-size:45px;font-weight:700;color:rgba(255,255,255,.85);letter-spacinggg:0;margin:0 0 0;padding:0;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase}
.intro_label p{animation: zoomInDown 4s; text-transform: uppercase; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7); margin: 0; padding: 0; letter-spacing: 2px}
.intro_label{margin:0 auto;text-align:center;padding:0}
.intro_buttondown a{position:absolute;bottom:10%;left:50%;z-index:2;display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color:#fff;font:normal 400 20px/1 'Josefin Sans',sans-serif;letter-spacinggg:.1em;text-decoration:none;transition:opacity .3s}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
@-webkit-keyframes slideUpso {
from {-webkit-transform: translate(-700px, 0)}
to { -webkit-transform: translate(0px, 0px)}
}
.intro_label h2{
-webkit-animation: slideUpso 3s;
-moz-animation: slideUpso 3s;
-ms-animation: slideUpso 3s;
-o-animation: slideUpso 3s;
animation: slideUpso 3s;
}
@-webkit-keyframes slideUpsos {
from {-webkit-transform: translate(0, 1000px)}
to { -webkit-transform: translate(0px, 0px)}
}
.intro_label p{
-webkit-animation: slideUpsos 3s;
-moz-animation: slideUpsos 3s;
-ms-animation: slideUpsos 3s;
-o-animation: slideUpsos 3s;
animation: slideUpsos 3s;
}
<div id='intro_homepage'>Thế là xong
<div class='meta_'>
<div class='intro_homepage_content'>
<div class='intro_label'>
<h2 class='_title'><i aria-hidden='true' class='fa fa-gg' style=' display:none; font-weight: 900;margin:0 20px 0 0'></i>HỒNG HẢI
<i aria-hidden='true' class='fa fa-gg' style=' display:none; font-weight: 900;margin:0 0 0 20px'></i><aa style='padding: 0 10px; background: #52537d; border-radius: 10px;'>BLOG</aa>
</h2>
<p>Blog chia sẽ thủ thuật Miễn Phí</p>
</div>
</div></div>
<div class='meta_'>
</div>
</div>
Chúc các bạn thành công
Tags:
Thủ Thuật Blogspot
nay tích cực share vậy ba ? -,-
Hay hay, đẹp đó -.-
quá chất lun
quá chất
hay đó anh hải
ak mà chèn ở đâu thì dc hả anh
qá đẹp