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

tháng 7 16, 2018

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:"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:#000;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}
/* 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*