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

Hướng dẫn đổi mật khẩu quản trị tối cao khi quên mật khẩu đăng nhập admin NukeViet

Mật khẩu là một dãy ký tự được mã hóa khi lưu vào trong cơ sở dữ liệu, nhưng đôi khi chúng ta không thể nhớ nó là gì thì sẽ tìm cách khôi phục lại mật khẩu. Tuy nhiên nếu như bạn sử dụng NukeViet mà không sử dụng tính năng reset mật khẩu […]

Xem chi tiết →

Hướng dẫn bật tắt tính năng quản lý bình luận cho từng module trong NukeViet

Bình luận là một điều khá quen thuộc trên các mạng xã hội nhưng đối với website thì nó càng quan trọng hơn. Nếu như website của bạn càng nhiều bình luận thì độ tin tưởng của bài viết có phần bình luận đó càng tốt hơn và được nhiều người để ý hơn về […]

Xem chi tiết →

Tải và cài đặt Egit cho phần mềm lập trình Aptana và Eclipse

Ở bài viết này mình hướng dẫn các bạn cách cài đặt Egit giúp bạn có đủ bộ cho phần mềm lập trình Aptana và Eclipse. Với thư viện này giúp ích cho bạn trong quá trình soạn thảo quản lý cũng như đưa code lên kho code trên internet và đa dạng về kho quản […]

Xem chi tiết →