Animated chỉ thị trực tuyến (có vẻ tốt nhất trên avatar dạng tròn) 1.1

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,956
Được Like
12,726
Bạn không ưa thích các chỉ số trực tuyến chuẩn? Và cố gắng sửa đổi nhanh chóng, chỉ có CSS, không có hình ảnh cần thiết:

Thêm vào EXTRA.css:

Mã:
.messageUserBlock div.avatarHolder .onlineMarker
{
	display: inline-block;
	width: 16px;
	height: 16px;
/*	margin: 9px 0 0 9px; <- if you'd like it on top left */
	margin: 79px 0 0 79px;
	background: #fff;
	border: none!important;
	border-radius: 50%!important
}
  
.messageUserBlock div.avatarHolder .onlineMarker:before
{
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	margin: 3px 0 0 3px;
	background: #7fb900;
	border-color: #7fb900;
	border-radius: 50%
}
 
 
 
 
.messageUserBlock div.avatarHolder .onlineMarker:after
{
	content: '';
	position: absolute;
	width: 32px;
	height: 32px;
	margin: -9px 0 0 -9px;
	border: 1px solid #7fb900;
	border-radius: 50%;
	box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900;
	-webkit-transform: scale(0);
	-webkit-animation: online 2.5s ease-in-out infinite;
	animation: online 2.5s ease-in-out infinite
}
 
 
 
 
@-webkit-keyframes online
{
	  0% {opacity: 1;-webkit-transform: scale(0)}
	 50% {opacity: .7}
	100% {opacity: 0;-webkit-transform: scale(1)}
}
 
 
 
 
@keyframes online
{
	  0% {opacity: 1;transform: scale(0)}
	 50% {opacity: .7}
	100% {opacity: 0;transform: scale(1)}
}

Điều này được kết quả cuối cùng như sau:

online-indicator2.gif

Chú ý: Điều này sẽ đặt một số tải trên CPU của người dùng do các vòng lặp hình ảnh động vô hạn.

Nguồn: xenforo.com​
 

Jindo_Katori

FirstSergeant
Tham gia
01/03/2015
Bài viết
1,454
Được Like
1,193
Nếu chỉ muốn lấy cái chấm chớp chớp không thôi thì sao xếp ?
 
  • Like
Reactions: THB
L

Lê Thanh Giảng

Khách VNXF
Bạn không ưa thích các chỉ số trực tuyến chuẩn? Và cố gắng sửa đổi nhanh chóng, chỉ có CSS, không có hình ảnh cần thiết:

Thêm vào EXTRA.css:

Mã:
.messageUserBlock div.avatarHolder .onlineMarker
{
    display: inline-block;
    width: 16px;
    height: 16px;
/*    margin: 9px 0 0 9px; <- if you'd like it on top left */
    margin: 79px 0 0 79px;
    background: #fff;
    border: none!important;
    border-radius: 50%!important
}
 
.messageUserBlock div.avatarHolder .onlineMarker:before
{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    margin: 3px 0 0 3px;
    background: #7fb900;
    border-color: #7fb900;
    border-radius: 50%
}




.messageUserBlock div.avatarHolder .onlineMarker:after
{
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    margin: -9px 0 0 -9px;
    border: 1px solid #7fb900;
    border-radius: 50%;
    box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900;
    -webkit-transform: scale(0);
    -webkit-animation: online 2.5s ease-in-out infinite;
    animation: online 2.5s ease-in-out infinite
}




@-webkit-keyframes online
{
      0% {opacity: 1;-webkit-transform: scale(0)}
     50% {opacity: .7}
    100% {opacity: 0;-webkit-transform: scale(1)}
}




@keyframes online
{
      0% {opacity: 1;transform: scale(0)}
     50% {opacity: .7}
    100% {opacity: 0;transform: scale(1)}
}

Điều này được kết quả cuối cùng như sau:

Chú ý: Điều này sẽ đặt một số tải trên CPU của người dùng do các vòng lặp hình ảnh động vô hạn.

Nguồn: xenforo.com​
anh ơi làm sau để thành viên chỉ dùng được ảnh tỉnh không ạ em thấy nó tốn vi sử lí khiến web nặng quá host bình thường hơi mệt
ah mà làm sau để cho avatar từ hình vuôn sang hình tròn được nhỉ
 
  • Like
Reactions: THB

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,956
Được Like
12,726
:))
 
  • Like
Reactions: THB
L

Lê Thanh Giảng

Khách VNXF
thế cái dẩu hiệu nhận biết là đang online từ bên gióc sang dấu chấm làm sau ạ
 
  • Like
Reactions: THB

hungnpna

Private
Tham gia
01/07/2015
Bài viết
48
Được Like
31
Có cách nào để phân biệt thành viên thường với thành viên VIP ko nhỉ? Tức là chỉ có VIP mới dùng cái này, còn bt thì ko.
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,956
Được Like
12,726
cái này là dùng chung nên không được :)
 

hungnpna

Private
Tham gia
01/07/2015
Bài viết
48
Được Like
31
Chú ý: Điều này sẽ đặt một số tải trên CPU của người dùng do các vòng lặp hình ảnh động vô hạn.
Cho mình hỏi tại sao nó lại ảnh hưởng đến load CPU? Nó chỉ là CSS chứ có phải jquery hay ajax gì đâu nhỉ?
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,956
Được Like
12,726
mình cũng không rõ ^^, bài gốc nó nói vậy thì note lại vậy ^^
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,956
Được Like
12,726
vậy là trong extra.css của bạn hoặc là có tồn tại 1 code tương tự hoặc là sai gì đó chứ mình vừa test lại trên 4rum mình và ok nha
 

Minh Đức

Gefreiter
Tham gia
15/03/2015
Bài viết
82
Được Like
43
vậy là trong extra.css của bạn hoặc là có tồn tại 1 code tương tự hoặc là sai gì đó chứ mình vừa test lại trên 4rum mình và ok nha
Chỉ chèn mỗi cái này để chuyển sang avatar tròn thôi ạ
Mã:
.avatar img, .avatar .img, .avatarCropper {
      border-radius: 60px 60px 60px 60px;
}
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,956
Được Like
12,726
vậy thì mình cũng bó tay ^^
 

Top Bottom