Share Intro hiệu ứng tuyệt đẹp cho blogspot

Share:
Share Intro hiệu ứng tuyệt đẹp cho blogspot

Share Intro hiệu ứng tuyệt đẹp cho blogspot

Hồng Hải đã đăng Thứ Ba, 17 tháng 7, 2018
Hiện có lượt xem và 0 bình luận

Chi tiết

Liên quan

Nhận xét

Tác giả

Ủng hộ tôi

  • Xem toàn trang
  • 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 
    Lưu ý:
    Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
    Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
    Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
    Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/iIEPcxC.png[/img]

    15 nhận xét:

    Author Image

    Hồng Hải

    Nếu thấy các bài viết trên blog hữu ích đối với bạn thì hãy mời tôi một ly cà phê tại đây nhé. Xin cảm ơn!