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*
BUỔI TRƯA VUI VẺ <3
Trả lờiXóacó GA ha
Trả lờiXóaCó đâu ông
XóaSao thấy quảng cáo của bọn Google trên blog này
Xóacó hở .-. tui có thấy đâu
XóaBuổi Chiều vui vẻ nha :v
Trả lờiXóathansks :v
Xóaa hahaha
Trả lờiXóaĐẹp lắm
Trả lờiXóakkk =)) test i chớ
XóaĐược, đẹp
Trả lờiXóathanks thanks =))
Xóafont chữ hơi xấu nhé
Trả lờiXóamuốn đẹp thì tự edit :)
Xóacòn dính GA kìa em :v
Trả lờiXóađâu cap em coi với sao em không thấy ta @@
XóaDemo?
Trả lờiXóangay blog tui kìa
Xóaok lác đổi cho
Trả lờiXóaCòn nhớ tui không ? :)))
Trả lờiXóasao lại quên :V kkk
XóaĐẹp đó em
Trả lờiXóahihi thanks anh =))
XóaHổng có gì
Xóavị trí cần hiển thị là vị trí nào ???
Trả lờiXóatùy ông thôi :3 có thể là dưới menu, trên menu, dưới footder
XóaVừa thay xong đẹp hơn intro cũ haha
Trả lờiXóaTôi mượn ảnh intro nhé hehe
Xóakkk thanks nha =))
Xóaintro em lỗi rồi kìa với bật ẩn danh là thấy quảng cáo :V
Trả lờiXóacoi lại thử được chưa anh :v
Xóatại em đang nén css
Xóanuô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
Xóarồi anh @@ tại em chả thấy ad nó hiện qua giờ
Xóaư ư...hello
Trả lờiXóaó ó hello anh
XóaLv
Xóa