HƯỚNG DẪN THÊM INTRO HIỆU ỨNG CSS ANIMATION TUYỆT ĐẸP


Hello 500 anh em :v Hôm vừa rồi mình thấy một đoạn intro được viết với CSS ANIMATION khá đẹp, vừa đơn giản lại chất nữa nên hôm nay quyết định viết bài hướng dẫn cho các bạn. Lưu ý là intro này mình rip được bên anh HẢI á >< Ahihi. Demo ngay blog mình nha.


HƯỚNG DẪN THỰC HIỆN

Các bạn chỉ cần thêm đoạn code này vào vị trí cần hiển thị là được :D
<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'/>QUỐC BẢO
<i aria-hidden='true' class='fa fa-gg' style='display:none;font-weight: 900;margin:0 0 0 20px'/><aa style='padding: 0 10px;background:linear-gradient(45deg,#4787ed,#019875);border-radius: 10px;'>BLOG</aa>
</h2>
<p>Blog tâm sự và sẻ chia</p>
</div>
</div></div>
</div>
<style>
#intro_homepage{position:relative;display:table;width:100%;height:200px;margin:0!important;padding:0!important;z-index:999;background:url(https://sites.google.com/a/oude.edu.vn/backup---cong-ho-tro-thong-tin-hoc-vien-oude/_/rsrc/1472847764389/cong-nghe/top-12-website-giang-day-lap-trinh-mien-phi-noi-tieng-nhat-tren-toan-cau/web.jpg) no-repeat center;background-size:cover!important;background-size:cover!important}
.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:&quot;Roboto Condensed&quot;,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:#000;font:normal 400 20px/1 &#39;Josefin Sans&#39;,sans-serif;letter-spacinggg:.1em;text-decoration:none;transition:opacity .3s}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
/* CSS cho trình duyệt Chrome or Cốc Cốc */
@-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}
/* CSS cho trình duyệt Chrome or Cốc Cốc */
@-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}
@media screen and (max-width:1010px){#intro_homepage{display:none}
</style>

LỜI KẾT

Quá đơn giản mà đúng không ? mình nghĩ chắc ai cũng sẽ làm được :D Nếu thấy hay hoặc có ý kiến gì thì cứ để lại bình luận bên dưới nhá !! Chúc các bạn thành công. 
*COPY NHỚ GHI NGUỒN*

41 Comments:

Post a Comment

  1. Domain bị die rồi. Đổi hộ lk với: https://lobatquai.blogspot.com

    ReplyDelete
  2. Replies
    1. đâu cap em coi với sao em không thấy ta @@

      Delete
  3. vị trí cần hiển thị là vị trí nào ???

    ReplyDelete
    Replies
    1. tùy ông thôi :3 có thể là dưới menu, trên menu, dưới footder

      Delete
  4. Vừa thay xong đẹp hơn intro cũ haha

    ReplyDelete
  5. intro em lỗi rồi kìa với bật ẩn danh là thấy quảng cáo :V

    ReplyDelete
    Replies
    1. coi lại thử được chưa anh :v

      Delete
    2. nuôi quảng cáo giùm ng ta hả :v vào head xóa hết code liên quan đến adsen đi

      Delete
    3. rồi anh @@ tại em chả thấy ad nó hiện qua giờ

      Delete