CSS

Khung thông tin liên hệ hiệu ứng động

Khung thông tin liên hệ hiệu ứng động đơn giản mà đẹp dùng CSS3 và hoàn toàn không có Javascript sẽ làm cho blog/website của bạn trông độc đáo, thú vị và đẹp mắt hơn. Giờ thì cùng mình tìm hiểu nhé.

Khung thông tin liên hệ hiệu ứng động

Trong bài viết mình có sử dụng FontAwesome nên nếu bạn nào chưa có thư viện thì thêm vào nhé.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

HTML

<div class="contact-info">
    <div class="container">
        <div class="row">
            <div class="col-4">
                <div class="contact-content blue-color">
                    <i class="fa fa-globe"></i>
                    <span><a href="pcdevshare.com" target="_blank" rel="nofollow">pcdevshare.com</a></span>
                </div>
            </div>
            <div class="col-4">
                <div class="contact-content red-color">
                    <i class="fa fa-codepen"></i>
                    <span><a href="//codepen.io/tsmkevin815" target="_blank" rel="nofollow">codepen.io/tsmkevin815</a></span>
                </div>
            </div>
            <div class="col-4">
                <div class="contact-content green-color">
                    <i class="fa fa-github"></i>
                    <span><a href="//github.com/phucuongblog" target="_blank" rel="nofollow">github.com/phucuongblog</a></span>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.contact-info .contact-content {
  position: relative;
}
.contact-info .contact-content i {
  display: inline-block;
  width: 100%;
  height: 150px;
  color: #999;
  text-align: center;
  line-height: 150px;
  background: #efeeee;
  font-size: 4rem;
  transition: 0.5s;
  position: absolute;
  left: 0;
  bottom: -1px;
}
.contact-info .contact-content span {
  width: 100%;
  height: 35px;
  display: inline-block;
  line-height: 35px;
  font-size: 14px;
  text-align: center;
  color: #fff;
  transition: 0.4s linear;
}
.contact-info .contact-content span a {
  text-decoration: none;
  color: #fff;
}
.contact-info .contact-content.red-color span {
  background: #dc3545;
}
.contact-info .contact-content.blue-color span {
  background: #007bff;
}
.contact-info .contact-content.green-color span {
  background: #28a745;
}
.contact-info .contact-content:hover i {
  bottom: 34px;
  font-size: 3rem;
  border-bottom: 1px solid #fff;
}
.contact-info .contact-content.blue-color:hover i {
  color: #fff;
  background: #007bff;
}
.contact-info .contact-content.red-color:hover i {
  color: #fff;
  background: #dc3545;
}
.contact-info .contact-content.green-color:hover i {
  color: #fff;
  background: #28a745;
}

Giải thích nguyên lý

Ta tạo 1 khối cha bao 2 phần tử chính là biểu tượng (FontAwesome) và thông tin liên hệ. Phần tử cha sẽ có position: relative, biểu tượng sẽ có position: absolute để mục đích chắn phần tử thông tin liên hệ đi.

Khi ta rê chuột vào phần tử cha thì phần tử biểu tượng sẽ nhích lên trên bằng việc thay đổi thuộc tính bottom, thu nhỏ biểu tượng, đổi màu đồng thời sẽ làm hiện ra phần tử thông tin liên hệ đã bị che đi từ đầu.

Demo: https://codepen.io/tsmkevin815/pen/oJMWbq

Lời kết

Phần thông tin liên hệ hiệu ứng động này mình đang làm dạng đơn giản. Các bạn hoàn toàn tùy biến theo ý mình được như việc chèn hình nền thay vì các biểu tượng (FontAwesome) kia cũng như làm cho nó xuất hiện từ trên xuống, trái, phải qua đều được.

Kể từ hôm nay, mình sẽ không comment từng dòng trên code như những bài trước. Thay vào đó, mình muốn các bạn đọc, tìm hiểu và áp dụng. Nếu thấy khó hiểu thuộc tính này, đoạn code kia dùng làm gì thì hãy để lại comment ngay dưới bài. Mình sẽ trả lời sớm nhất có thể. Thanks a lot!

Created by: PCDevShare.Com

9
Bình luận

avatar
4 Comment threads
5 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
6 Số người bình luận
Cuong NguyenĐẶNG HƯNGNIỆMNguyễn Phúc NguyênQuốc Bảo Blog Người mới bình luận
  Đăng kí  
mới nhất cũ nhất nhiều vote nhất
Nhận thông báo từ
Nguyen Dien | 5 comments
Khách
Nguyen Dien | 5 comments

đẹp lắm a :v nhìn thấy mê nhưng không có chỗ để nên thôi

NIỆM | 9 comments
Khách
NIỆM | 9 comments

Chèn ko đc 3 khung thì chèn 1 khung thôi :))

Quốc Bảo Blog | 30 comments
Khách
Quốc Bảo Blog | 30 comments

có animation mọi thứ trở nên sinh động hơn

Nguyễn Phúc Nguyên | 1 comments
Khách
Nguyễn Phúc Nguyên | 1 comments

liên kết ko bác

ĐẶNG HƯNG | 7 comments
Khách
ĐẶNG HƯNG | 7 comments

cbi nghĩ tết chưa anh