SHARE INTRO HIỆU ỨNG TUYỆT ĐẸP CHO BLOGSPOT

Bài viết cùng chuyên mục

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;
    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 00;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;
}

 Bước 2: Ta chèn code bên dưới vào nới bạn muốn hiển thị..

<div id='intro_homepage'>
<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>

Thế là xong
Chúc các bạn thành công 

                                                                                                  HỒNG HẢI BLOG