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