22 Tháng 9, 2017 • Tác giả: Thịnh Nguyễn • Chuyên mục: NukeViet, Wordpress

Chia sẻ mã nguồn biểu tượng điện thoại rung lắc cho website

Biểu tượng gọi điện bằng icon điện thoại giúp khách hàng của bạn click nhanh để gọi ngay trên điện thoại thông minh hoặc ứng dụng gọi điện miễn phí trên máy tính. Điều này giúp bạn và khách hàng liên lạc nhanh hơn thay vì chờ đợi email như thông thường.

Khi bạn click vào biểu tượng nó sẽ ra số điện thoại mà bạn thêm vào nó để bổ sung vào phần gọi điện trên điện thoại thông minh hay mở skype. Mình nói đến đây chắc các bạn đã hiểu rồi chứ?

Tuy nhiên nó là dạng nút rung rắc và tỏa vòng chuyển động từ nhỏ đến to mờ dần và lặp lại liên tục và sau đây là đoạn code bao gồm html và css mình chia sẻ với các bạn.

Mã HTML

<div class="quick-alo-phone quick-alo-green quick-alo-show" id="quick-alo-phoneIcon">
   <a href="tel:01674596344" title="Liên hệ nhanh">
      <div class="quick-alo-ph-circle"></div>
      <div class="quick-alo-ph-circle-fill"></div>
      <div class="quick-alo-ph-img-circle"></div>
   </a>
</div>

Mã CSS

.quick-alo-phone{
	display: block;
}

.quick-alo-phone.quick-alo-static {
	opacity:.6;
}
.quick-alo-phone.quick-alo-hover,
.quick-alo-phone:hover {
	opacity:1;
}
.quick-alo-ph-circle {
	width:160px;
	height:160px;
	top:20px;
	left:20px;
	position:absolute;
	background-color:transparent;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
	border-radius:100%;
	border:2px solid rgba(30,30,30,0.4);
	border:2px solid #bfebfc 9;
	opacity:.1;
	-webkit-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
	-moz-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
	-ms-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
	-o-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
	animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
	-webkit-transition:all .5s;
	-moz-transition:all .5s;
	-o-transition:all .5s;
	transition:all .5s;
	-webkit-transform-origin:50% 50%;
	-moz-transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-o-transform-origin:50% 50%;
	transform-origin:50% 50%;
}
.quick-alo-phone.quick-alo-active .quick-alo-ph-circle {
	-webkit-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
	-moz-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
	-ms-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
	-o-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
	animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-static .quick-alo-ph-circle {
	-webkit-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
	-moz-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
	-ms-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
	-o-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
	animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-hover .quick-alo-ph-circle,
.quick-alo-phone:hover .quick-alo-ph-circle {
	border-color:#00aff2;
	opacity:.5;
}
.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-circle,
.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-circle {
	border-color:#75eb50;
	border-color:#baf5a7 9;
	opacity:.5;
}
.quick-alo-phone.quick-alo-green .quick-alo-ph-circle {
	border-color:#00aff2;
	border-color:#bfebfc 9;
	opacity:.5;
}
.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-circle,
.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-circle {
	border-color:#ccc;
	opacity:.5;
}
.quick-alo-phone.quick-alo-gray .quick-alo-ph-circle {
	border-color:#75eb50;
	opacity:.5;
}
.quick-alo-ph-circle-fill {
	width:100px;
	height:100px;
	top:50px;
	left:50px;
	position:absolute;
	background-color:#000;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
	border-radius:100%;
	border:2px solid transparent;
	opacity:.1;
	-webkit-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
	-moz-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
	-ms-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
	-o-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
	animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
	-webkit-transition:all .5s;
	-moz-transition:all .5s;
	-o-transition:all .5s;
	transition:all .5s;
	-webkit-transform-origin:50% 50%;
	-moz-transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-o-transform-origin:50% 50%;
	transform-origin:50% 50%;
}
.quick-alo-phone.quick-alo-active .quick-alo-ph-circle-fill {
	-webkit-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
	-moz-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
	-ms-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
	-o-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
	animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-static .quick-alo-ph-circle-fill {
	-webkit-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
	-moz-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
	-ms-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
	-o-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
	animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
	opacity:0 !important;
}
.quick-alo-phone.quick-alo-hover .quick-alo-ph-circle-fill,
.quick-alo-phone:hover .quick-alo-ph-circle-fill {
	background-color:rgba(0,175,242,0.5);
	background-color:#00aff2 9;
	opacity:.75 !important;
}
.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-circle-fill,
.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-circle-fill {
	background-color:rgba(117,235,80,0.5);
	background-color:#baf5a7 9;
	opacity:.75 !important;
}
.quick-alo-phone.quick-alo-green .quick-alo-ph-circle-fill {
	background-color:rgba(0,175,242,0.5);
	background-color:#a6e3fa 9;
	opacity:.75 !important;
}
.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-circle-fill,
.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-circle-fill {
	background-color:rgba(204,204,204,0.5);
	background-color:#ccc 9;
	opacity:.75 !important;
}
.quick-alo-phone.quick-alo-gray .quick-alo-ph-circle-fill {
	background-color:rgba(117,235,80,0.5);
	opacity:.75 !important;
}
.quick-alo-ph-img-circle {
	width:60px;
	height:60px;
	top:70px;
	left:70px;
	position:absolute;
	background:rgba(30,30,30,0.1) url("http://i.imgur.com/YWJeVO2.png") no-repeat center center;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
	border-radius:100%;
	border:2px solid transparent;
	opacity:.7;
	-webkit-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
	-moz-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
	-ms-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
	-o-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
	animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
	-webkit-transform-origin:50% 50%;
	-moz-transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-o-transform-origin:50% 50%;
	transform-origin:50% 50%;
}
.quick-alo-phone.quick-alo-active .quick-alo-ph-img-circle {
	-webkit-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
	-moz-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
	-ms-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
	-o-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
	animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-static .quick-alo-ph-img-circle {
	-webkit-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
	-moz-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
	-ms-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
	-o-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
	animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-hover .quick-alo-ph-img-circle,
.quick-alo-phone:hover .quick-alo-ph-img-circle {
	background-color:#00aff2;
}
.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-img-circle,
.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-img-circle {
	background-color:#75eb50;
}
.quick-alo-phone.quick-alo-green .quick-alo-ph-img-circle {
	background-color:#00aff2;
}
.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-img-circle,
.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-img-circle {
	background-color:#ccc;
}
.quick-alo-phone.quick-alo-gray .quick-alo-ph-img-circle {
	background-color:#75eb50;
}
@-moz-keyframes quick-alo-circle-anim {
	0% {
		-moz-transform:rotate(0) scale(.5) skew(1deg);
		opacity:.1;
		-moz-opacity:.1;
		-webkit-opacity:.1;
		-o-opacity:.1;
	}
	30% {
		-moz-transform:rotate(0) scale(.7) skew(1deg);
		opacity:.5;
		-moz-opacity:.5;
		-webkit-opacity:.5;
		-o-opacity:.5;
	}
	100% {
		-moz-transform:rotate(0) scale(1) skew(1deg);
		opacity:.6;
		-moz-opacity:.6;
		-webkit-opacity:.6;
		-o-opacity:.1;
	}
}
@-webkit-keyframes quick-alo-circle-anim {
	0% {
		-webkit-transform:rotate(0) scale(.5) skew(1deg);
		-webkit-opacity:.1;
	}
	30% {
		-webkit-transform:rotate(0) scale(.7) skew(1deg);
		-webkit-opacity:.5;
	}
	100% {
		-webkit-transform:rotate(0) scale(1) skew(1deg);
		-webkit-opacity:.1;
	}
	}
	@-o-keyframes quick-alo-circle-anim {
	0% {
		-o-transform:rotate(0) kscale(.5) skew(1deg);
		-o-opacity:.1;
	}
	30% {
		-o-transform:rotate(0) scale(.7) skew(1deg);
		-o-opacity:.5;
	}
	100% {
		-o-transform:rotate(0) scale(1) skew(1deg);
		-o-opacity:.1;
	}
}
@-moz-keyframes quick-alo-circle-fill-anim {
	0% {
		-moz-transform:rotate(0) scale(.7) skew(1deg);
		opacity:.2;
	}
	50% {
		-moz-transform:rotate(0) -moz-scale(1) skew(1deg);
		opacity:.2;
	}
	100% {
		-moz-transform:rotate(0) scale(.7) skew(1deg);
		opacity:.2;
	}
}
@-webkit-keyframes quick-alo-circle-fill-anim {
	0% {
		-webkit-transform:rotate(0) scale(.7) skew(1deg);
		opacity:.2;
	}
	50% {
		-webkit-transform:rotate(0) scale(1) skew(1deg);
		opacity:.2;
	}
	100% {
		-webkit-transform:rotate(0) scale(.7) skew(1deg);
		opacity:.2;
	}
}
@-o-keyframes quick-alo-circle-fill-anim {
	0% {
		-o-transform:rotate(0) scale(.7) skew(1deg);
		opacity:.2;
	}
	50% {
		-o-transform:rotate(0) scale(1) skew(1deg);
		opacity:.2;
	}
	100% {
		-o-transform:rotate(0) scale(.7) skew(1deg);
		opacity:.2;
	}
}
@-moz-keyframes quick-alo-circle-img-anim {
	0% {
		transform:rotate(0) scale(1) skew(1deg);
	}
	10% {
		-moz-transform:rotate(-25deg) scale(1) skew(1deg);
	}
	20% {
		-moz-transform:rotate(25deg) scale(1) skew(1deg);
	}
	30% {
		-moz-transform:rotate(-25deg) scale(1) skew(1deg);
	}
	40% {
		-moz-transform:rotate(25deg) scale(1) skew(1deg);
	}
	50% {
		-moz-transform:rotate(0) scale(1) skew(1deg);
	}
	100% {
		-moz-transform:rotate(0) scale(1) skew(1deg);
	}
}
@-webkit-keyframes quick-alo-circle-img-anim {
	0% {
		-webkit-transform:rotate(0) scale(1) skew(1deg);
	}
	10% {
		-webkit-transform:rotate(-25deg) scale(1) skew(1deg);
	}
	20% {
		-webkit-transform:rotate(25deg) scale(1) skew(1deg);
	}
	30% {
		-webkit-transform:rotate(-25deg) scale(1) skew(1deg);
	}
	40% {
		-webkit-transform:rotate(25deg) scale(1) skew(1deg);
	}
	50% {
		-webkit-transform:rotate(0) scale(1) skew(1deg);
	}
	100% {
		-webkit-transform:rotate(0) scale(1) skew(1deg);
	}
}
@-o-keyframes quick-alo-circle-img-anim {
	0% {
		-o-transform:rotate(0) scale(1) skew(1deg);
	}
	10% {
		-o-transform:rotate(-25deg) scale(1) skew(1deg);
	}
	20% {
		-o-transform:rotate(25deg) scale(1) skew(1deg);
	}
	30% {
		-o-transform:rotate(-25deg) scale(1) skew(1deg);
	}
	40% {
		-o-transform:rotate(25deg) scale(1) skew(1deg);
	}
	50% {
		-o-transform:rotate(0) scale(1) skew(1deg);
	}
	100% {
		-o-transform:rotate(0) scale(1) skew(1deg);
	}
}
.quick-alo-phone {
	position: fixed;
	background-color: transparent;
	width: 150px;
	height: 150px;
	cursor: pointer;
	z-index: 200000 !important;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	-webkit-transition: visibility .5s;
	-moz-transition: visibility .5s;
	-o-transition: visibility .5s;
	transition: visibility .5s;
	right: 150px;
	bottom: 90px;
}

Sau đó việc còn lại là bạn đưa css vào file css còn html cho vào cuối site trước thẻ đóng </body>. Như vậy là xong, chúc các bạn thành công!

Tác giả: Thịnh Nguyễn

Chuyên gia chia sẻ kiến thức về lập trình, thiết kế web và tối ưu hệ thống server.

Chia sẻ bài viết này:
Facebook Twitter

6 bình luận

  • Tuấn

    02/11/2018 lúc 19:47

    mình đã làm tương tự như HD mà ko thấy xuất hiện bạn ạ. Mong bạn giúp đỡ

  • bách

    20/06/2018 lúc 16:38

    Bạn ơi thường thì khi người ta click vào biểu tượng đấy thì sẽ hiện jk ra vậy?

    • Thịnh Nguyễn

      20/06/2018 lúc 17:07

      Nếu trên mobile thì khi bấm vào nó sẽ lấy luôn số điện thoại trên đó vào phần nhập số điện thoại trên điện thoại của bạn, còn trên pc hay tablet thì nó sẽ mở ra ứng dụng gọi điện ví dụ skype hay zalo

  • Minh Thanh

    29/05/2018 lúc 17:26

    Cho nó nằm ở góc trái hoặc phải bên dưới thì sao hả bạn ?

  • Luân

    03/02/2018 lúc 10:42

    Hướng Dẫn cụ thể hơ được không admin, như code css mình chèn vào file nào ở vị trí nào ah, Thank Thịnh Nguyễn

    • Thịnh Nguyễn

      03/02/2018 lúc 11:52

      bạn copy paste vào file style.css của theme đang xài nhé

Để lại bình luận của bạn

Địa chỉ email của bạn sẽ không được công bố rộng rãi. Các trường bắt buộc được đánh dấu *

Bài viết liên quan

Các hàm được xây dựng sẵn có trong mã nguồn NukeViet 4.x

Hàm trong php được quy định theo một trật tự chung và cũng như các mã nguồn mở khác nhau được viết bằng ngôn ngữ lập trình PHP thì đều được cá nhà phát triển mã nguồn định nghĩa cho chúng ta các hàm thường được sử dụng theo một cách riêng và nhất định. […]

Xem chi tiết →

Hướng dẫn quản trị Menu cho website sư dụng mã nguồn mở WordPress

Menu là một tính năng hữu ích giúp bạn điều hướng website để khách hàng có thể tìm kiếm thông tin hay gì đó trên website của bạn. Nhìn chung thì một website mà không có menu thì website đó càng không thân thiện với người dùng, bởi vậy mà hôm nay mình sẽ hướng […]

Xem chi tiết →

Hướng dẫn tắt tạm thời hoặc xóa block vĩnh viễn trên website sử dụng nukeviet

Block nukeviet là một khối vị trí trên website và làm lên nó là những đoạn mã php, html, css, jquery phù hợp với nhu cầu của người quản trị đề ra. Chính vì thế khi bạn không sử dụng block đó nữa hoặc tạm thời ẩn đi không cho hiển thị trên website và […]

Xem chi tiết →