SHARE INTRO HIỆU ỨNG TUYỆT ĐẸP CHO BLOGSPOT Bác sĩ windows

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

đã xuất bản September 18, 2018

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>