Thứ Ba, 17 tháng 7, 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 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;
}
 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 

Nhận Thiết Kế

fb.com/HongHai.H.T.H
instagram.com/honghai.des
01682253xxx
honghai251325@gmail.com

Facebook Comments

15 nhận xét :