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

[PVS]

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:

.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​

 

[kimchihanquoc]

cái này mình làm hình vuông. nên ko cần dùng.

 

[Jindo_Katori]

Nếu chỉ muốn lấy cái chấm chớp chớp không thôi thì sao xếp ?

 

[PVS]

Nếu chỉ muốn lấy cái chấm chớp chớp không thôi thì sao xếp ?

ý bạn là sao, là cái chỉ thị đó hả

 

[Lê Thanh Giảng]

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:

.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:

View attachment 200
​

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ỉ

 

[nttruong]

Avatar từ vuông sang tròn thì phải css nha bạn. Cứ border-radius: 50% phang vào là ok!

 

[PVS]

)

 

[Lê Thanh Giảng]

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 ạ

 

[Jindo_Katori]

ý bạn là sao, là cái chỉ thị đó hả

Là làm cái dấu màu xanh hiện thị user đang "online" chớp chớp á (mà vẫn để avatar mặc định)

 

[thành lê]

Cái này hay nè :v

 

[PVS]

Là làm cái dấu màu xanh hiện thị user đang "online" chớp chớp á (mà vẫn để avatar mặc định)

à, sẽ có 1 bài hướng dẫn riêng nha

 

[Jindo_Katori]

à, sẽ có 1 bài hướng dẫn riêng nha

Hóng xếp

 

[hungnpna]

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]

cái này là dùng chung nên không được

 

[hungnpna]

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]

mình cũng không rõ ^^, bài gốc nó nói vậy thì note lại vậy ^^

 

[Minh Đức]

Đã làm và không thấy hiện

 

[PVS]

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]

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 ạ

.avatar img, .avatar .img, .avatarCropper {
      border-radius: 60px 60px 60px 60px;
}

 

[PVS]

vậy thì mình cũng bó tay ^^